Img or Svg element?

Say you have a Figma where the designer have created icons and such. Do you prefer to export them to svg and use them inside an <img /> element with the src pointing to the file, or do you prefer to extract the path and use the <svg> directly like that? It feels like you get more control with svg tag since you can recolour etc, but it also clutters things to have the paths and all?
B
b1mind13d ago
#depends how I want it cached is it reused, am I animating it. Typically I'll make a svg sprite. Either inline in a component or as a file. The <use> it. Never really use it in a <img> though
Z
Zerthz13d ago
The usage is typically icons in things like buttons and so, in different vue components. how would you go about <use> a file? might need to read into that, thought <img> was the only way to use an svg file
B
b1mind13d ago
Just look up SVG spirites
B
b1mind13d ago
B
b1mind13d ago
Sara is where I learned about them https://discord.com/channels/436251713830125568/1022308880732147812 I know you're working with a designer but also good resource Let's you make sprites from the bag and I love it
Want results from more Discord servers?
Add your server
More Posts
Element for <slot>?Is it possible to not pass a wrapper element to a `<slot />`? It looks like I have to use a wrapper overflow while body does not have an heightwhy i am facing overflow problem but when i give body height of 100vh the overflow goes awayDoing responsive text by using media queries on :root to change the font size for smaller screens.While trying to figure out a good way to do responsive text without manually setting font size usingHow to fix this snap dynamic horizontall scroll effect?I'm trying to make an effect where you firstly scroll verticall, then when reaching a certain point Issue with Making Child Div Inherit Height from Parent <td> without js or absolute positning.I'm facing a problem with making a child div (.auto-box) inherit the height of its parent <td> in HTColor pngMy restraints are kind of weird, but I have game file icons that I want to port to the browser. Its How do i design something like thisI am trying to design this just using div and inside this div ( span ) how can i get the same resultquotes within html attributehow does the browser know which quote ends the attribute value?Card positioning inside a grid container, we want the price and buttons to be the same for each cardhttps://github.com/callum-laing/shopping-site/tree/main/app As you can see in the image, the buttonTrying to align every card so that the button?in before someone mentions the unfinished title. https://github.com/callum-laing/shopping-site/treeTailwind helpI use Tailwind and would like to display the 2 Li elements next to each other with a small distance What's a modern simple logical layout I can use for the main logo?I'm working on a website for my dads business and I just want to keep it really clean and modern. ThHelp with side navigation/sidebarI’m new to JavaScript and I’ve been working on personal projects trying to improve my skills. Couldbackground scrolling when menu is openHello, does anybody know, how to stop background scrolling when you open side menu? I've tried overfescaping the wrapperHey, is there a way to escape a wrapper on one side without using grid? I'm aware Kevin has made a vSome serious problems with my CSSSo, I have started building a site and I have got as far as the navigation, when I made it a few dayScroll Shadow in CSSWhen I scroll the white shadow is coming from below. How to make this with CSS. https://www.harpersOverflow-y: auto makes x-axis scrollbar appearHi folks, I have a react Sidebar component with scss styles. The sidebar has the main list 'sidebar_minFn confusionCodePen: https://codepen.io/Ceecee-Hart/pen/dyLZrKb I'm not sure where this extra space is coming fTriggering an animation based on scroll positionHi I want to recreate the marquee effect on scroll. https://afundi.im/ Any tips?