如何将 vaadin-icon 导入 React 组件？答案

【问题标题】：How to import vaadin-icon into React component?如何将 vaadin-icon 导入 React 组件？
【发布时间】：2018-08-13 03:54:10
【问题描述】：

我想在我的 React 项目中使用 @vaadin/vaadin-icons。

我正在尝试使用：

import VaadinPlus from "@vaadin/vaadin-icons/assets/svg/plus.svg";

<ListItemIcon>
  {VaadinPlus}
</ListItemIcon>

Here is the CodeSandbox.

【问题讨论】：

标签： javascript reactjs icons vaadin

【解决方案1】：

docs中给出的图标导入方式是

import '@vaadin/vaadin-icons/vaadin-icons.js';

然后，按照docs消费

<iron-icon icon="vaadin:vaadin-h"></iron-icon>

在此之后，我创建了一个沙盒 here。请检查一下。

【讨论】：

【解决方案2】：

您可以将您的 webpack 配置为使用 react-svg-loader，它允许您导入 SVG 图标，如 JSX 组件：

import Logo from './logo.svg';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Logo fill="red" className="logo" width={50} height={50} />
      </div>
    );
  }
}

最低配置如下所示：

{
  test: /\.svg$/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "react-svg-loader",
      options: {
        jsx: true // true outputs JSX tags
      }
    }
  ]
}

【讨论】：

使用 vaadin 图标在我的 CodeSandbox 中看起来如何？
我对codeSendbox不熟悉，没看到webpack的配置。