How can I use both regular and duotone icons in my project?

[TorstenKestermann]

How can I use different kinds of icons (regular, duotone, thin, ...) in my project to the same time?

[Th3S4mur41]

All icons variations are delivered with the @eviden-parallel/icons package.

If you are using the icons individually from the svg folder, you just need to add the modifier at the end of the icon name to get the different style.

E.g.: @eviden-parallel/icons/svg/airplane.svg is the regular icon, while the duotone one would be @eviden-parallel/icons/svg/airplane--duotone.svg

Now, if you are using the sprit for performance reasons, you have two options:

1. Using the pre-packaged sprites

With this solution, you can load the second sprite in the exact same way, to you already load the first one.
You'll only have to swap two things to get a different icon style: the sprite path and the icon id.

<!-- regular icon -->
<svg viewBox="0 0 16 16">
  <use xlink:href="@eviden-parallel/icons/sprite.svg#airplane"></use>
</svg>
<!-- duotone icon -->
<svg viewBox="0 0 16 16">
  <use xlink:href="@eviden-parallel/icons/sprite-duotone.svg#airplane--duotone"></use>
</svg>

2. Building your own sprite

This solution has the advantage to reduce to number of server requests, since the client would only load one sprite with all necessary icons in it.

To do this, you can use the CLI to create your own sprite like this:

npx parallel-icons -o=assets -t regular duotone -n mysprite

This will create a mysprite.svg in the assets folder containing both regular and duotone icons.
You can then use the sprite as before as this:

<!-- regular icon -->
<svg viewBox="0 0 16 16">
  <use xlink:href="assets/mysprite.svg#airplane"></use>
</svg>
<!-- duotone icon -->
<svg viewBox="0 0 16 16">
  <use xlink:href="assets/mysprite.svg#airplane--duotone"></use>
</svg>