search

LiveDuo / destack

Page builder for Next.js 🅧. Zero-config deployment 🚀. React now supported!
MIT License
1.56k stars 314 forks source link

Header Vector Swaps #35

Closed reavpC6K closed 2 years ago

reavpC6K commented 2 years ago

Firstly thanks for your efforts in putting this together. Making Tailblocks sites is a breeze. Just curious what's the correct way to swap the header component svg. In https://destack-page.vercel.app/, swapping the svg's ViewBox and Path (plain dimensions, no tags) doesn't seem to work across all the vectors I tried, leaving nothing but a solid background.

LiveDuo commented 2 years ago

Hey @cvoadmin,

There are two ways to change the header SVG:

  1. Enter a new path in the component settings
  2. Replace the who component with a new image component and then add an image of your choice.

If you stumbled across a bug, feel free to share the exact SVG path you entered or any other way to reproduce the problem.

reavpC6K commented 2 years ago

For reference, I tried vectors from SVGrepo.com After a bit of research I learned tailwind devs use Hero Icons and they swap perfectly. Something about the design eh...

reavpC6K commented 2 years ago

Tabler Icons is another great source. Maybe implementing these for quick swaps would be neat. Paths must be merged into one line. For example a fish:

<path d="M16.69 7.44a6.973 6.973 0 0 0 -1.69 4.56c0 1.747 .64 3.345 1.699 4.571"></path>  
<path d="M2 9.504c7.715 8.647 14.75 10.265 20 2.498c-5.25 -7.761 -12.285 -6.142 -20 2.504"></path>  
<path d="M18 11v.01"></path>  
<path d="M11.5 10.5c-.667 1 -.667 2 0 3">

Must be: M16.69 7.44a6.973 6.973 0 0 0 -1.69 4.56c0 1.747 .64 3.345 1.699 4.571M2 9.504c7.715 8.647 14.75 10.265 20 2.498c-5.25 -7.761 -12.285 -6.142 -20 2.504M18 11v.01M11.5 10.5c-.667 1 -.667 2 0 3

Sample Closing for now.