SCSS support

[osterbaer]

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]

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.

[hexabinaer]

I understand the duotone challenge and have full respect for refraining from the task. But to answer the question, here's a use case and an argument.

why it makes sense over just using the lib classes

I am one of the maintainers of OpenCulturas. To give platform owners full control over the design, we separate design from code wherever possible. Any theme developer should always be able to change the icon font while re-using the given Sass mixins. As an example: .add--button { @include icon(plus, before) }.

Admittedly: sometimes the very same element already has a different :after element so I fully see your point.

For the time being, fontawesome is serving the icons in a default OpenCulturas setup but we would like very much to switch to phosphor-icons. Of course we would need to integrate a mapping table since icon names are not identical across icon fonts. Besides that, I was curious whether others had similar requirements, hence this comment.

@osterbaer would you mind sharing the mentioned script?