![]() 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |