JIYIK CN >

Changing the color of an SVG in React:

1. fillDon't set the and attributes on SVG stroke.
2. Import the SVG as a component.
3. Set fill and stroke props on the component, <MyLogo fill="black" stroke="yellow" />e.g.

import {ReactComponent as MyLogo} from './my-logo.svg';

export default function App() {
  return (
    <div>
      <MyLogo fill="black" stroke="yellow" />
    </div>
  );
}

Below is an example of svg.

<svg width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke-width="5" />
</svg>

Note that we did not set the and attributes on the svg element .fillstroke

fillIf and have not been defined in the svg stroke, they will only be applied if set via component properties.

fillThe property sets the color of the interior of an object, while **strokethe ** property sets the color of the line around the object.

Alternatively, we can paste the SVG into the component and pass the color as an attribute

function MyLogo({fill, stroke}) {
  // 👇️ Paste the SVG into the component
  // Fill and stroke colors as attributes
  return (
    <svg fill={fill} stroke={stroke} width="400" height="400">
      <circle cx="100" cy="100" r="50" stroke-width="5" />
    </svg>
  );
}

export default function App() {
  return (
    <div>
      <MyLogo fill="black" stroke="yellow" />
    </div>
  );
}

The code example above achieves the same result, but we store the SVG directly in the component instead of importing it from a file with the svg extension.

Notice that the MyLogo component takes fillthe and strokevalues ​​as attributes and applies them to the svg element.

If we didn't have a loader that could import SVG as a component, this should be our preferred method.