Question

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

我正在尝试使用：

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

<ListItemIcon>
  {VaadinPlus}
</ListItemIcon>

Here is the CodeSandbox.

Answer 1

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

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

然后，按照docs

进行消费

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

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

Answer 2

您可以将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
      }
    }
  ]
}

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

2 个答案: