Alt approach to duotone icons?

[nourmalaeb]

Hi! First, thank you so much for these icons. Love the figma plugin and react library.

We had an idea for the duotone variant of the icons where rather than it be tone on tone, the translucent element in the icon could have its own color.

It would be amazing if the duotone icon could have an extra property for changing the secondary color. I'm not a very experienced developer but I can help with this if you'd like.

[rektdeckard]

Thanks for the kind words @nourmalaeb! This is something we weighed while designing the library, and there were a few reasons we steered away from it. First, exposing this option only on the Duotone icons would mean either having a different API and component set just for the Duotones, or having that property go unused on the other icons -- something we want to avoid to keep everything clean and simple. Second, we want Phosphor icons to look great everywhere. With the option you suggest comes the chance to make something that looks...not good :) If we were to have a two-color option, we would probably choose different elements to take a secondary color.

Not to say we've closed the door for good, but it's probably not a feature we'll be building in soon. If this is really important for your use-case, I'd suggest forking this repo and making the change yourself! We codegen the components from the raw SVGs, and you could simply change the assembly script in your fork, pull in the /assets folder every time we push an update to main, and run your custom generator. To do this I would:

1. Modify IconBase, types, context, and render function in /lib to include a second, optional color prop on each icon
2. Modify the assembly script in /bin/assemble.js to generate components with the extra prop, using a RegEx to target the elements with opacity: 0.2 and adding your alt color prop name there (see the readFile() and generateComponents() functions).
3. Run yarn assemble to generate your custom Icons

I'd be happy to offer some more help if you need!

[br-lemes]

I implemented this idea in a fork: https://github.com/br-lemes/phosphor-duocolor-react

@rektdeckard If you can take a look at diffs, I don't know Context and TypeScript enough to be sure the code is ok.

I can't run yarn lint src, I suppose you have something installed globally which is not in package.json. I guessed some of then (eslint-config-standard, eslint-plugin-standard), but not all.

[rektdeckard]

@br-lemes this is pretty cool! But again, not something we wish to add to Phosphor upstream right now. I also took a pass at solving this in a different way, using a wrapping component and inline stylesheets. Would be pretty simple to just add this component to your app: https://stackblitz.com/edit/react-ts-kvdzu1?file=App.tsx,node_modules%2F%40types%2Freact%2Findex.d.ts

[rektdeckard]

This could also obviously by done with plain old CSS that targets a class and an element with 0.2 opacity, as all our duotone layers have it:

.duocolor-green [opacity="0.2"] {
  opacity: 1;
  fill: green;
}

<FlyingSaucer className="duocolor-green" />

[rektdeckard]

[br-lemes]

Nice! I liked the plain old CSS approach, it's simple and easy. I didn't know I could do this. Thanks!

I made an example: https://stackblitz.com/edit/vitejs-vite-4oj5iw?file=src/App.tsx