search

nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
864 stars 37 forks source link

Duplicate CSS declarations #167

Open KazariEX opened 1 month ago

KazariEX commented 1 month ago

Could the default CSS declarations be extracted into the .iconify rule?

image

Atinux commented 1 month ago

cc @antfu

antfu commented 1 month ago

Currently, this is how Iconify generates those data. I don't consider this a very big issue as gzip should do the work already.

Also mention some of the trade-off if we going to do so:

  1. Properties like width and height can be different for different icons.
  2. Rendering mode can be different for different icons (here, use mask for most monochrome icons), but there are also colored icons where we need to use a background image (read https://antfu.me/posts/icons-in-pure-css)
  3. .iconify is too general to be a common class, as it is also shared with SVG mode. We might introduce a .iconify-css and put the common props there. Which we also add that class name to every icon.

So, in the end, it might still be useful to have such optimization, but I would expect somewhat around ~10% size improvements after gzip - if that still matters to you, PR is greatly welcome :)