search

phosphor-icons / web

A flexible icon family for the web
https://phosphoricons.com
MIT License
389 stars 36 forks source link

SCSS support #22

Open osterbaer opened 1 year ago

osterbaer commented 1 year ago

Hello,

in my current project, we would like to use the Phosphor Icons library. Still we don't want to use the CSS classes directly but integrate the icons into our existing classes. For that it would be awesome to have SCSS variables for the unicode characters used by the different icons. Is something like that planned for the near future? Currently, we're using a script extracting the necessary data out of the stylesheet file, but it would be way better to reference the library directly.

Thanks in advance!

rektdeckard commented 1 year ago

I'm not super versed in SCSS beyond the base case of variables, but can you explain your use case and why it makes sense over just using the lib classes?

Since our implementation uses pseudoelements and multiple classes and properties, you would need to be careful about how you applied them. content: $ph-smiley; would probably work fine for regular weight, but how would you approach the duotone icons, which are implemented with a :before AND an :after pseudoelement, with specific opacity and margin respectively? How would WE recommend they be used?

Consider this case:

.ph-duotone.ph-address-book:before {
  content: "\e900";
  opacity: 0.2;
}
.ph-duotone.ph-address-book:after {
  content: "\e901";
  margin-left: -1em;
}

What is idiomatic SCSS would you write for this? What markup?

Happy to include it if you contribute a solution that makes sense and is codegen-able, but it's not something I am planning for the moment.