SCSS support

[phosphor-icons]

SCSS support

[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.