1

I have some SVG graphics that I would like to apply conditional styling on (e.g. linearGradient when it's active). How would I go about achieving this? I'd rather not (if there's another way) have to go in a manually add a defs tag with linearGradients in there, and I've seen stuff about using an externals defs file to access the fill I want (so I can specify either a solid color or gradient depending on state). I'm not sure how to ask, or where to look.

An example:

An SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
  <path d="M20.94 9.56c.74 0 1.35.62 1.35 1.38v1.84c0 3.79-2.48 7.85-6.44 8.81v1.36A3.02 3.02 0 0 1 12.88 26a3.02 3.02 0 0 1-2.97-3.05v-1.34c-3.36-.83-6.2-5.05-6.2-8.83v-1.84c0-.76.6-1.38 1.35-1.38.74 0 1.34.62 1.34 1.38v1.84a6.7 6.7 0 0 0 6.6 6.79 6.7 6.7 0 0 0 6.6-6.79v-1.84c0-.76.6-1.38 1.34-1.38ZM13.08 0c2.77 0 5 2.28 5 5.09v7.44c0 2.8-2.23 5.08-5 5.08-2.76 0-5-2.28-5-5.08V5.09a5.05 5.05 0 0 1 5-5.09Z" fill-rule="evenodd"/>
</svg>

Now - I have a LOT of these, so I was hoping I could link the gradient from an external source, or use some other way to just slap a linear gradient on top of them. Is there such a way? What would be the best way to add gradients to 100+ icons without having to go in and edit each one of them? Is there a bulk editor somewhere that I don't know about?

halfer
  • 19,824
  • 17
  • 99
  • 186
Joel Hager
  • 2,990
  • 3
  • 15
  • 44
  • Have you looked at this https://stackoverflow.com/a/55269126/104337 – skrat Dec 16 '21 at 00:43
  • In React Native though, there's no real CSS. It's just the StyleSheet element. How would I be able to target styles externally like that? Am I misunderstanding you? – Joel Hager Dec 16 '21 at 03:26

0 Answers0