Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: Style namespacing #94

Open
Ariane-B opened this issue Aug 28, 2023 · 0 comments
Open

Feature request: Style namespacing #94

Ariane-B opened this issue Aug 28, 2023 · 0 comments

Comments

@Ariane-B
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant