Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

custom icon with multiple changeable colors

See original GitHub issue

Hello, im trying to figure out how/if i can have a custom icon with multiple changeable colors. eg. for an svg like this one:

<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10Z" fill="#EEEEEE"/>
    <path d="M10.47 14.1498C10.46 14.1998 10.455 14.2648 10.455 14.3448C10.455 14.5848 10.545 14.7048 10.725 14.7048C10.805 14.7048 10.89 14.6798 10.98 14.6298C11.08 14.5798 11.22 14.4948 11.4 14.3748L11.595 14.8848C11.425 15.1148 11.16 15.3498 10.8 15.5898C10.45 15.8298 10.005 15.9498 9.465 15.9498C9.005 15.9498 8.645 15.8648 8.385 15.6948C8.135 15.5148 8.01 15.2848 8.01 15.0048C8.01 14.9448 8.015 14.8948 8.025 14.8548L8.415 11.8998L8.835 8.7648L7.995 8.3148L8.115 7.6698L11.01 7.2798L11.4 7.4598L10.47 14.1498ZM10.455 5.9898C10.155 5.9898 9.885 5.8698 9.645 5.6298C9.415 5.3898 9.3 5.1198 9.3 4.8198C9.3 4.4098 9.44 4.0648 9.72 3.7848C10 3.4948 10.37 3.3498 10.83 3.3498C11.18 3.3498 11.46 3.4648 11.67 3.6948C11.88 3.9248 11.985 4.1898 11.985 4.4898C11.985 4.9298 11.855 5.2898 11.595 5.5698C11.335 5.8498 10.955 5.9898 10.455 5.9898Z" fill="#113053"/>
</svg>

where i want to be able to control “#EEEEEE” and “#113053” i need the icon for different interaction states such as hover where UX wants a slightly different color in both places.

Is this doable currently, and how?

im using vite and vue2, and would love it if its possible to control it with css, such as color for the “i” (“#EEEEEE”) in the svg and background-color for the background (“#113053”).

Issue Analytics

State:
Created a year ago
Comments:6

Top GitHub Comments

1reaction

jens-morten-mikkelsencommented, May 13, 2022

okay, it sounds like i have to look else where or make something special for this case. Thank you very much for your help 😃

0reactions

userquincommented, May 13, 2022

@jens-morten-mikkelsen you can, but we have that limitation, the svg is the svg you request, once on the client is has one color, the requested, if you want to change dynamically that color, you will need to add some logic in your component around that svg.