[feat]: Come with an API to style SVGs

[gu-stav]

A clear and concise description of what the feature is

This is not fleshed out yet, but we should develop a solid API to theme SVGs in the DS. This could either mean to use currentColor inside of SVGs, to create a component API, which allows us to re-colorize SVG child elements.

It would address e.g. the following issues:

• [bug]: SVG theming API bug #803
• Theme: Remove default color from icons #735

and allow us to get a common overwrite pattern mentioned below.

Why should this feature be included?

Because we can not set a color on Icons we have to repeat the following pattern a lot in the CMS:

const Chevron = styled(Box)`
  svg path {
    fill: ${({ theme }) => theme.colors.primary600};
  }
`;

Please provide an example for how this would work

not yet defined

[ronronscelestes]

bumping into this feature request, to make sure I understand the need, what in your opinion is missing from the Icon component that would allow better re-colorization? 👀

[joshuaellis]

So, there are three issues we've highlighted:

problem 1

SVGs that only need one colour (solution could be just using currentColor)

problem 2

SVGs that have multiple colors inside – howd you handle that? Could better SVG creation be the solution…

problem 3

Some SVGs shouldn’t change color based on their theme typically in the CTB

(this problem stems into some components)

For example, problem 1 & 3 can be fixed directly in the @strapi/icons package, problem 2 is the big one 🤔

[joshuaellis]

solved by #1696