Closed sisou closed 5 years ago
When you compare the output, are you looking at the unminified output? The additional runtime included should only be this file https://github.com/kisenka/svg-sprite-loader/blob/master/runtime/browser-sprite.js and the generated svg sprites (which include a few unnecessary lines, yes).
Minified, however, I don't think you can get much lower with the runtime and the SVG needs to be included as well. That's why I said we should only export the icons that we use per build-target.
Oh, just saw that the runtime has a dependency on the svg-baker-runtime
, so that explains where all the code comes from :(
I just looked into the vue-svg-loader
(loading svg as component) and it can also work with one main Icon.vue
component, by using a dynamic <component v-bind:is="icon-component-name"/>
as the template (https://vuejs.org/v2/guide/components.html#Dynamic-Components).
We would however have to both import and register each icon in the Icon.vue component, making it two lists there (of which the second (registering) list would be used to comment out unused icons.
Yes, exactly all the code from browser-sprite.js
is bundled to browser-sprite.build.js
which is a big chunk of code.
But it's not the only import.
As initially stated, browser-symbol.js
get's imported too, which is a smaller file though.
Maybe we should actually not have a parent Icon
component but just separate components generated by vue-svg-loader
. This would enable tree-shake-ability (some day, not now) instead of commenting in / our used / unused icons.
Separate icon components could actually be configured by each project individually with the updated @nimiq/styles that includes the SVGs, just like we do it here. This top-level icon component is thus only a helper basically, as it does the work already.
And yes, we can in the future, when we have working code-splitting/tree-shaking, also export each individual icon.
Closed in favor of #29.
This PR adds an Icon component which is able to show any icon available in
@nimiq/style
.The icon sprite is compiled during build time from the icons imported into the
Icon.vue
component. To not include all icons in every build, the list of icons can be reduced in the component by commenting out unwanted imports (just like in themain.ts
file).I had to do some webpack trickery to handle icon SVGs differently from regular SVGs (e.g. the Identicon SVG) and had to discover and use the
oneOf
rule separator for the webpack config.