CODEWITHSUNDEEP
reactjssvg
ADV
ADV

Reputation: 189

How to customize svg title in React

In svg file have this svg:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2856 2H19.5522C20.9037 2 22.0001 3.1059 22.0001 4.47018V7.7641C22.0001 9.12735 20.9037 10.2343 19.5522 10.2343H16.2856C14.933 10.2343 13.8367 9.12735 13.8367 7.7641V4.47018C13.8367 3.1059 14.933 2 16.2856 2Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.44892 2H7.71449C9.06703 2 10.1634 3.1059 10.1634 4.47018V7.7641C10.1634 9.12735 9.06703 10.2343 7.71449 10.2343H4.44892C3.09638 10.2343 2 9.12735 2 7.7641V4.47018C2 3.1059 3.09638 2 4.44892 2Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.44892 13.7657H7.71449C9.06703 13.7657 10.1634 14.8716 10.1634 16.2369V19.5298C10.1634 20.8941 9.06703 22 7.71449 22H4.44892C3.09638 22 2 20.8941 2 19.5298V16.2369C2 14.8716 3.09638 13.7657 4.44892 13.7657Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2856 13.7657H19.5522C20.9037 13.7657 22.0001 14.8716 22.0001 16.2369V19.5298C22.0001 20.8941 20.9037 22 19.5522 22H16.2856C14.933 22 13.8367 20.8941 13.8367 19.5298V16.2369C13.8367 14.8716 14.933 13.7657 16.2856 13.7657Z" stroke="#B5B8BB" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

I am importing it like this:

import { ReactComponent as Icon } from 'assets/icons/icon.svg';

And use it just like this:

<Icon title="icon title"/>

Can I somehow customize this title? I mean change color, background ...

Upvotes: 0

Views: 2722

Answers (1)

Sarun
Sarun

Reputation: 59

You can provide props into the SVG tag itself, you can see all the tags you can use on SVG tag here.

So, to change the color on the SVG, you'd pass "fill" to "red". Here's a sandbox example of it.

Upvotes: 1

Related Questions