<img><\/code>, <embed><\/code>, <object><\/code>, <iframe><\/code>, <canvas><\/code> and <svg><\/code> among them. I think for any halfway modern browser there are really only two serious contenders here. Referencing an SVG file:<\/p>\n\n\n\n<img src=\"image.svg\" \/><\/code><\/p>\n\n\n\nAnd embedding the SVG directly into the DOM.<\/p>\n\n\n\n
<svg><circle cx=\"50\" cy=\"50\" r=\"40\" \/><\/svg><\/code><\/p>\n\n\n\nThere are some advantages and drawbacks to each. <img><\/code> tags will keep your layouts small and only download the image as it’s needed. It can be cached by the browser and doesn’t need to be re-downloaded when your JS bundles update. But you can’t change their fill with CSS rules, which makes them not ideal for icons, which often need to switch color in dark vs light mode or for high contrast mode.<\/p>\n\n\n\nConversely, <svg><\/code> tags are malleable to CSS rules, but they are harder to bring in, cache separately and lazy-load.<\/p>\n\n\n\nIn our case we support dark and light modes, so we went with <svg><\/code> tags for our icons.<\/p>\n\n\n\nShould we delay-load?<\/h2>\n\n\n\n
Now the question is, how do we include them from our Web Component templates? In React we have SVGR, to turn SVGs into React components that can do fancy stuff like tell Webpack to make a separate bundle with the SVG data and go load that in on-demand.<\/p>\n\n\n\n
There is not yet a tool that can do exactly that for Web Components. I was preparing to sit down and write one, but after thinking about it for a bit and consulting with some members of the FAST Element team; I don’t think it’s necessary to load them separately.<\/p>\n\n\n\n
- Properly optimized icon SVGs are tiny, since they are just vector data. Not a lot is being gained by pushing that off to a separate web request and running it through a bunch of code to bring it in.<\/li>
- The icon data is slim enough that it will represent a small fraction of the template size.<\/li>
- Bundled icons never have late pop-in and are never missing. They are treated like just another part of your view template.<\/li><\/ul>\n\n\n\n
How to include them in your template<\/h2>\n\n\n\n
Putting them straight into the template is one way:<\/p>\n\n\n\n
<button><svg><circle cx=\"50\" cy=\"50\" r=\"40\" \/><\/svg><\/button><\/code><\/pre>\n\n\n\nThat’s not great because you can’t re-use them, and if you need to update an icon you have to go find everywhere you used it.<\/p>\n\n\n\n
(fun fact: you only need the xmlns attribute on the <svg> tag when it’s in a file and you can omit it when it’s embedded in the DOM)<\/p>\n\n\n\n
The next impulse is to just export them from some icons module:<\/p>\n\n\n\n
export const circleIcon = `<svg><circle cx=\"50\" cy=\"50\" r=\"40\" \/><\/svg>`;<\/code><\/pre>\n\n\n\nThen import the string and include in your template:<\/p>\n\n\n\n
<button>${circleIcon}<\/button><\/code><\/pre>\n\n\n\nThat was what we tried at first. It worked, but it had some drawbacks. Our central icons file soon got quite large, up to 220kb of icons from various things that might eventually be shown at some point in interacting with the app. But we only need ~10kb of that for the first page load. The initial assumption was that Webpack would save us, but it just ended up putting the whole giant module in a critical JS bundle. That means we’d need to front load every single icon before we could display anything at all. Oops.<\/p>\n\n\n\n
The solution<\/h2>\n\n\n\n
We ended up using a combination of raw-loader and svgo-loader<\/a> webpack modules. In our webpack config:<\/p>\n\n\n\nmodule: {\r\n rules: [\r\n { test: \/\\.svg$\/, use: [\r\n { loader: \"raw-loader\" },\r\n {\r\n loader: \"svgo-loader\",\r\n options: {\r\n configFile: false,\r\n floatPrecision: 2,\r\n plugins: extendDefaultPlugins([\r\n \"removeXMLNS\", \/\/ We can safely remove the XMLNS attribute because we are inlining our SVGs\r\n {\r\n name: \"removeViewBox\",\r\n active: false\r\n }\r\n ])\r\n }\r\n }\r\n ]},\n ...<\/code><\/pre>\n\n\n\nRaw-loader means it’s going to bring the string directly into the module instead of reference it somewhere else.<\/p>\n\n\n\n
![\"\"](\"https:\/\/i1.wp.com\/engy.us\/blog\/wp-content\/uploads\/2021\/10\/image.png?resize=213%2C177&ssl=1\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/i2.wp.com\/engy.us\/blog\/wp-content\/uploads\/2021\/10\/image-1.png?resize=137%2C85&ssl=1\")
<\/figure>\n\n\n\n