How to modify SVG in react-CodePudding

I need change the color and scale the svg in react.

Using i can manipulate the width and height using a className like: "w-[10vw]", but can't change the color. On other hand, if i create a component for SVG, i don't know how to make scalar size using className.

code of my attempts:

Code of React Component SVG:

import * as React from 'react'

export interface IVectorBarSVGProps { fill: string }

export function VectorBarSVG({ fill }: IVectorBarSVGProps) { return ( ) }

CodePudding user response：

You may modify colors of an SVG by specifying "fill" and "stroke".

function Component() {
  return (
    <svg className="stroke-cyan-500 fill-blue-500">
      <!-- ... -->
    </svg>
  );
}

When using TailwindCSS you must not dynamically assemble class names. This will not work:

function Component({color}) {
  return (
    <svg className={`stroke-${color} fill-${color}`}>
      <!-- ... -->
    </svg>
  );
}

This is because TailwindCSS does not execute your programm. It scans your source code and generates a CSS file based on class names and expressions it recognized.

Instead, you should be hiding these details in your component and expose a more convenient interface.

function Component({isPrimary, isBig}) {
  return (
    <svg className={
      (isPrimary ? "fill-blue-500" : "fill-gray-500")
        " "
        (isBig ? "w-96" : "w-24")
    }>
      <!-- ... -->
    </svg>
  );
}

// And use it like so:
<Component isPrimary />
<Component isBig />

One more thing, if your desired color changes aren't applied to the SVG, you are probably not applying your classes to the correct elements within that SVG.

For example, here's an SVG that contains a circle, a rectangle, and a line:

function Component() {
  return (
    <svg width="391" height="391" viewBox="-70.5 -70.5 391 391">
    <rect x="-70" y="-70" width="390" height="390"/>
    <g>
      <rect x="25" y="25" width="200" height="200" />
      <circle cx="125" cy="125" r="75"/>
      <line x1="50" y1="50" x2="200" y2="200" />
    </g>
    </svg>
  )
}

To change the fill color of the circle, you would have to apply the class names to the circle element:

function Component() {
  return (
    <svg width="391" height="391" viewBox="-70.5 -70.5 391 391">
    <rect x="-70" y="-70" width="390" height="390"/>
    <g>
      <rect x="25" y="25" width="200" height="200" />
      <circle cx="125" cy="125" r="75" className="fill-amber-500 stroke-blue-800"/>
      <line x1="50" y1="50" x2="200" y2="200" />
    </g>
    </svg>
  )
}

CodePudding user response：

SVG is complicated. There are several ways to insert SVG into html or React. Unless you're using off-the-shelf solutions, figuring out your SVG processing approach will require creativity and likely alcohol for inspiration. First, look at how your component works under the hood of what the final html document looks like. There are several ways to process svg images. If you use some of these ways, you lose control of the fill property. The fill CSS property becomes unavailable in the external CSS file and simply will not work. Secondly, the fill property might be set in the body of the SVG itself, in which case you will not be able to overwrite the internal value of the fill with CSS. You will either have to remove this property from the SVG to make it available through external CSS, or you will have to change the fill property manually in the body of the SVG itself every time. I hope my answer helped you.