Icon 图标

基本用法

import { Icon } from 'zarm';
const ICONS = [
  'add', 'add-round', 'add-round-fill', 
  'minus', 'minus-round', 'minus-round-fill',
  'arrow-top', 'arrow-bottom', 'arrow-left', 'arrow-right',
  'info-round', 'info-round-fill',
  'warning-round', 'warning-round-fill',
  'right', 'right-round', 'right-round-fill',
  'wrong', 'wrong-round', 'wrong-round-fill',
  'question-round', 'question-round-fill',
  'required', 'broadcast', 'deletekey', 'keyboard', 'search', 'date', 'time',
];
ReactDOM.render(
  <div className="grid">
    {ICONS.sort().map((iconType) => {
      return (
        <div className="grid-column" key={iconType}>
          <Icon type={iconType} theme="primary" size="lg" />
          <span>{iconType}</span>
        </div>);
    })}
  </div>
, mountNode);

主题

import { Icon } from 'zarm';
ReactDOM.render(
  <div className="grid">
    <div className="grid-column">
      <Icon type="warning-round" theme="warning" />
      <span>warning</span>
    </div>
    <div className="grid-column">
      <Icon type="wrong-round" theme="danger" />
      <span>danger</span>
    </div>
    <div className="grid-column">
      <Icon type="info-round" style={{ color: '#1890ff' }}/>
      <span>custom color</span>
    </div>
  </div>
, mountNode);

尺寸

import { Icon } from 'zarm';
ReactDOM.render(
  <div className="grid">
    <div className="grid-column">
        <Icon type="search" theme="primary" size="sm" />
        <span>sm</span>
    </div>
    <div className="grid-column">
        <Icon type="search" theme="primary" />
        <span>md</span>
    </div>
    <div className="grid-column">
        <Icon type="search" theme="primary" size="lg" />
        <span>lg</span>
    </div>
  </div>
, mountNode)

自定义 Iconfont 图标

我们提供了一个 createFromIconfont 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。

其本质上是组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，并且创建了一个 <use> 标签来渲染图标的组件。

详见 iconfont.cn 使用帮助 查看如何生成symbol代码的 js 地址。

import { Icon } from 'zarm';
const MyIcon = Icon.createFromIconfont('//at.alicdn.com/t/font_1340918_4p9b5skcr79.js'); // generated by iconfont.cn
ReactDOM.render(
  <div className="grid">
    <div className="grid-column">
        <MyIcon type="home" theme="primary" />
        <span>home</span>
    </div>
    <div className="grid-column">
        <MyIcon type="user" theme="primary" />
        <span>user</span>
    </div>
  </div>
, mountNode);

自定义 SVG 图标

可以通过配置 svgr 来将 svg 图标作为 React 组件导入。

本示例以 webpack 为参考，使用 @svgr/webpack 来实现，其他实现方式请参阅 svgr 文档。

// webpack.config.js
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  issuer: {
    test: /\.jsx?$/,
  },
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
},

import { Icon } from 'zarm';
import { ReactComponent as YourSvg } from 'path/to/yourSvg.svg'; // path to your '*.svg' file.
ReactDOM.render(<Icon component={YourSvg} />, mountNode);

API