时间戳

首页 > 解决方案 > 有没有办法将 SVG 图像作为组件导入？

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

问题描述

我的最终目标是动态导入 SVG 图像并更改其填充颜色。

当我查看任何典型的 SVG 图像文件时，它看起来像这样

<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>

如果我能以某种方式导入 svg 中的组件，我可以用我自己的样式 svg 组件包装它并更改填充颜色。但是，当我尝试像这样导入 svg 图像文件时import Truck from './Truck.svg，我得到一个像这样的奇怪字符串console.log(Truck)

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

有没有办法将 svg 图像文件作为组件导入？又名原样？如果可以的话，我想做这样的事情来改变颜色填充：

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>
  );
}

标签： javascripthtmlcssreactjssvg

解决方案

有几种方法可以做到这一点。一种方法是将 svg 转换为 React 组件。另一种方法是，如果您使用 Create React App，则将 svg 作为这样的组件导入（文档）：

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

CRA 在后台使用https://github.com/gregberge/svgr。

这是使用后一种方法和样式组件https://codesandbox.io/s/naughty-cannon-8nffx的示例。

推荐阅读