How can I set the SVG color using a CSS variable?

Setting SVG colors with CSS variables provides flexibility and maintainability. Here's how you can accomplish this:

1. Inline SVG: Ensure your SVG code is directly included in your HTML (not as an image source). This allows CSS to target SVG elements.

2. Use CSS Variables: Define a CSS variable (custom property) with your desired color value. For example, --svg-color: #007bff; .

3. Target SVG Elements: Use CSS selectors to target the specific parts of the SVG you want to color, and use the fill or stroke properties along with your CSS variable.

4. Example Implementation:

Let's say you have the following SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5v-6l-10 5-10-5v6z"/>
</svg>

And this CSS code:

.my-icon {
  --svg-color: #007bff; / Set your desired color /
   width: 30px;
   height: 30px;
}
.my-icon path {
   fill: var(--svg-color);
}


And this HTML code:

<div class="my-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5v-6l-10 5-10-5v6z"/> </svg> </div>

In this example, the .my-icon class sets the --svg-color variable, and the path inside the SVG uses this variable for its fill color. You can change the value of --svg-color to modify the color of the SVG. You can also use stroke for the outline color, and this works similarly.

5. Benefits of using CSS Variables:

- Centralized control: Change the variable once to update multiple SVG icons.

- Theming: Easily adapt to different themes by modifying the color variables.

- Dynamic changes: Use JavaScript to dynamically update the color by changing the CSS variable.

By using CSS variables in combination with inline SVGs, you can achieve a high degree of flexibility and customization of your SVG colors. Remember to adapt your selectors based on your specific SVG structure.

Learn more about this