更多

Question

有没有办法将SVG转换为typescript和webpack的react组件？我知道SVG可以用<img> - 标签显示，但是因为我想用CSS改变颜色这还不够。

我尝试了几个用于反应的svg组件，但那些没有使用typescript，因为它们不是特定类型。

Answer 1

Typecript的SVG-React组件

只需从渲染功能中返回svg内容即可。

示例：

export class Mail extends React.PureComponent<{}, {}>{
  render() {
    return (
      <svg width="24px" height="24px" viewBox="0 0 25 25">
        <g stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
          <g fill="#807370">
            <g transform="translate(3.000000, 6.000000)">
              <path d="M11.541,7.064 C11.006,7.439 10.219,7.662 9.433,7.662 L9.418,7.662 C8.629,7.662 7.842,7.437 7.307,7.062 L0,2 L0,11.474 C0,11.885 0.334,12.22 0.746,12.22 L17.869,12.22 C18.277,12.22 18.613,11.885 18.613,11.474 L18.613,2.166 L11.541,7.064" />
              <path d="M8.086,6.549 C8.396,6.768 8.916,6.905 9.422,6.905 L9.432,6.905 C9.934,6.905 10.457,6.766 10.766,6.551 L18.613,1.111 L18.613,0.746 C18.613,0.334 18.277,0 17.869,0 L0.746,0 C0.334,0 0,0.334 0,0.746 L0,0.945 L8.086,6.549" />
            </g>
          </g>
        </g>
      </svg>
    );
  }
}

打字稿的SVG-React组件

1 个答案:

更多