用于 Typescript 的 SVG-React 组件答案

【问题标题】：SVG-React Component for Typescript用于 Typescript 的 SVG-React 组件
【发布时间】：2018-05-09 23:52:56
【问题描述】：

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

我尝试了几个 svg-components 来进行反应，但它们不适用于 typescript，因为它们不是特定类型。

【问题讨论】：

标签： css reactjs typescript svg

【解决方案1】：

用于 Typescript 的 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>
    );
  }
}

https://egghead.io/lessons/react-render-basic-svg-components-in-react

【讨论】：

我也找到了这个解决方案，但它很不方便，因为并非所有 SVG 类型都与 typescript 兼容（例如，inkscape SVG 包含 typescript 编译器无法读取的信息）。还有其他方法吗？
就是这样。使用any 消除任何类型错误，就像使用原始 JavaScript ?
@basarat 使用 any 消除 Typescript 中的错误完全否定了使用该语言的意义。在这种情况下，使用此文件中的列表检查 SVG 类型会更有意义：github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/… 按照接口中的类型：SVGAttributes

更多