Icon 图标

图标组件，除了内置的常用图标外，还可以自定义引入 SVG 图标。

<Icon> 通过字体实现的矢量图形。 <IconStack> 实现多个图标叠加。

获取组件

import { Icon } from 'rsuite';

自定义 Icon, 可以渲染一个外部引入的 svg 文件。

同时需要在 webpack 中配置 svg loader, 这里用到一个 svg-sprite-loader

{
  test: /\.svg$/,
  use: [{
    loader: 'svg-sprite-loader',
    options: {
      symbolId: 'icon-[name]'
    }
  }]
}

如果您需要 svg 图标颜色与文字颜色一致，可以使用 currentColor以确保您的 fill、 strocke 颜色与字体颜色保持一致。如果您使用了 svg-sprite-loader，则应对 use 元素设置 currentColor。

属性名称	类型 `(默认值)`	描述
classPrefix	string `('icon')`	组件 CSS 类的前缀
size	enum: 'lg', '2x', '3x', '4x', '5x'	放大图标