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

Question

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

我正在尝试使用：

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

<ListItemIcon>
  {VaadinPlus}
</ListItemIcon>

Here is the CodeSandbox.

Answer 1

您可以配置您的 webpack 以使用 react-svg-loader 它允许您导入像 JSX 组件这样的 SVG 图标：

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

Answer 2

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

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

然后，按照docs

消费

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

在此之后，我分叉了一个沙箱 here。请检查一下。

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

How to import vaadin-icon into React component?

javascript

icons

vaadin

reactjs