vurallstar.blogg.se - Icon svg user

I don't think any one approach is better than the others, as they all have different trade-offs and might work better in different scenarios. For example, you may need to remove height, width, fill, and stroke attributes, either manually or programatically.

No matter which approach you use, the SVG icons you use may need some tweaking so that the size and colors can be customised using Tailwind.

If you're using stroke-based icons then you can take advantage of Tailwind 1.2's new stroke width utilities.As mentioned above, you will need to choose between stroke-current and fill-current depending on your icon set.You can see a full example of this approach at As with approach 2, SVG images will no longer be handled by file-loader so using them with will not work.Similar webpack configuration grossness required as approach 2.The contents of the SVG are inserted as plain HTML rather than being converted into a Vue template, which probably removes some unnecessary overhead from the other approaches.As above, the raw SVGs are available in the repo for use in other contexts.The only difference is where the icons are stored and how we determine the icon name from the file name. Optionally import the icon components automaticallyĪs with the first approach, we also have the option of automatically populating the icons object by looping over the icons on the filesystem. But it is a pretty simple plugin that uses the official vue-template-compiler under the hood so I don't see this as a big deal.

vue-svg-loader does not appear to be very widely used.

SVG images will no longer be handled by file-loader so using them with will not work.

svg files, before then configuring vue-svg-loader to handle them instead.

Webpack configuration is required for Vue CLI (and Storybook if you're using it) to remove the existing loader for.

on static HTML pages, PDFs, emails, etc.)

Pure SVG files are maintained in the repo and can be used outside of Vue context (e.g.

svg files rather than needing to manually wrap them in their own component. This component is almost identical to the first approach, with the only difference being that we're able to directly require the. I need to put the icons within that I think? Here is the css I have for the icons. So I have the placeholder with a string which currently just printing that string. Right now I have the SVG's in my directory and ready to go I just need to know how to place them within the input. There are icons on the left side of the inputs. Here is the wireframe and then I show my code. It's probably a really easy task for someone who knows their way around front end code.

I need to place icons within the inputs for creating a new user.