search

vbenjs / vite-plugin-svg-icons

Vite Plugin for fast creating SVG sprites.
MIT License
801 stars 109 forks source link

Feature request: Style namespacing #94

Open Ariane-B opened 1 year ago

Ariane-B commented 1 year ago

When making SVGs with Adobe Illustrator, it tends to generate very simple element class names, such as st0, st1 and so on.

Those class names will frequently stay throughout the process and reach the final SVG sprite, which can lead to overlaps. For instance, if icon 1 has the following styles:

<style type="text/css">
  .st0 {
    fill: #000;
  }
</style>

And icon 2 has the following styles:

<style type="text/css">
  .st0 {
    fill: #fff;
    stroke: #000;
  }
</style>

There is a possibility that they will affect each other, and that one icon will end up an unexpected color. This just happened to us, and my solution was to remove unneeded classes and add BEM-like prefixes to those that were useful.

It might be nice to add a process that automatically transforms classes in each icon in such a way that they are unique; for instance by prefixing them all with the unique symbol name.