search

nimiq / vue-components

Vue component library for Nimiq ecosystem apps.
https://nimiq.github.io/vue-components/
Apache License 2.0
17 stars 4 forks source link

Add Icon component #28

Closed sisou closed 5 years ago

sisou commented 5 years ago

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 the main.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.

sisou commented 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.

sisou commented 5 years ago

Oh, just saw that the runtime has a dependency on the svg-baker-runtime, so that explains where all the code comes from :(

sisou commented 5 years ago

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.

danimoh commented 5 years ago

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.

sisou commented 5 years ago

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.

sisou commented 5 years ago

Closed in favor of #29.