有没有办法将 SVG 图像作为组件导入？

Question

My ultimate goal is to dynamically import SVG images and change their fill colors.

When I look at any typical SVG image file, it looks like this

<svg width="80" height="67" viewBox="0 0 80 67" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.9064 37.9622L73.1528 18.9576C71.9728 15.6344 68.816 13.4 65.3059 13.4H53.3354V8.375C53.3354 3.7587 49.5953 0 45.0017 0H8.33366C3.74014 0 0 3.7587 0 8.375V55.275C0 58.0454 2.24675 60.3 5.00019 60.3H10.1704C10.9438 64.1156 14.3139 67 18.334 67C22.3542 67 25.7243 64.1156 26.4977 60.3H56.8355C57.6089 64.1156 60.979 67 64.9992 67C69.0193 67 72.3895 64.1156 73.1628 60.3H75.0029C77.7597 60.3 80.0031 58.0454 79.9998 55.275V38.525C80.0031 38.334 79.9698 38.1431 79.9064 37.9622ZM3.33346 8.375C3.33346 5.60455 5.58022 3.35 8.33366 3.35H45.0017C47.7619 3.35 50.0019 5.60455 50.0019 8.375V43.55H3.33346V8.375ZM18.334 63.65C15.5806 63.65 13.3339 61.3955 13.3339 58.625C13.3339 55.8545 15.5806 53.6 18.334 53.6C21.0942 53.6 23.3342 55.8545 23.3342 58.625C23.3342 61.3955 21.0942 63.65 18.334 63.65ZM65.0025 63.65C62.2458 63.65 60.0023 61.3955 60.0023 58.625C60.0023 55.8545 62.2458 53.6 65.0025 53.6C67.7593 53.6 70.0027 55.8545 70.0027 58.625C70.0027 61.3955 67.7626 63.65 65.0025 63.65ZM76.6696 55.275C76.6696 56.1996 75.923 56.95 75.0029 56.95H73.1695C72.3961 53.1343 69.026 50.25 65.0059 50.25C60.9857 50.25 57.6156 53.1343 56.8422 56.95H26.501C25.7277 53.1343 22.3575 50.25 18.3374 50.25C14.3172 50.25 10.9471 53.1343 10.1737 56.95H5.00019C4.08016 56.95 3.33346 56.1996 3.33346 55.275V46.9H51.6687C52.5887 46.9 53.3354 46.1496 53.3354 45.225V16.75H65.3025C67.4093 16.75 69.3027 18.09 70.0127 20.0832L76.6696 38.8131V55.275ZM60.0023 33.5V21.775C60.0023 20.8504 59.2556 20.1 58.3356 20.1C57.4156 20.1 56.6689 20.8504 56.6689 21.775V35.175C56.6689 36.0996 57.4156 36.85 58.3356 36.85H70.0027C70.9228 36.85 71.6694 36.0996 71.6694 35.175C71.6694 34.2504 70.9228 33.5 70.0027 33.5H60.0023Z" fill="#4B286D"/>
</svg>

If I can somehow import the components inside the svg, I can wrap it with my own styled svg component and change the fill color. However, when I try to import an svg image file like so import Truck from './Truck.svg , I get a strange string like this when I console.log(Truck)

data:image/svg+xml,%3Csvg width='73' height='71' viewBox='0 0 73 71' fill='n...

Is there a way to import an svg image file as a component? aka the way as it is? If I can I would like to do something like this to change the color fill:

import React, { useState } from "react";
import styled from "styled-components";

const StyledSVG = styled.svg`
  & path {
    fill: ${props => props.color};
  }
`;

export default function App() {
  const [colorChosen, setColorChosen] = useState("green");

  return (
    <Container>
      <StyledSVG color={colorChosen} width="73" height="71" viewBox="0 0 73 71">
        <Truck />
      </StyledSVG>
    </Container>
  );
}

Answer 1

There are a couple ways you could do this. One way would be to transform the svg into a React component. Another way would be, if you're using Create React App, to import the svg as a component like this ( docs ):

import { ReactComponent as Badge } from "./icon.svg";

CRA uses https://github.com/gregberge/svgr under the hood.

Here's an example using the latter approach with styled components https://codesandbox.io/s/naughty-cannon-8nffx .