DynamicIcon 自定义 Iconfont 图标组件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/dynamic-icon@0.1.8 -S

DynamicIcon 组件，相比 Icon，可以从 http://iconfont.cn 自定义图标集，同时内置了一些扩展的图标集合。

自定义 iconfont.cn 项目使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DynamicIcon from '@icedesign/dynamic-icon';
// 使用 custom 生成自定义 ICON 组件
const CustomIcon = DynamicIcon.create({
  fontFamily: 'iconfont',
  prefix: 'icon',
  css: 'https://at.alicdn.com/t/font_1472628097_7496383.css',
});
class App extends Component {
  state = {};
  render() {
    return <CustomIcon type="dingding" />;
  }
}
ReactDOM.render(<App />, mountNode);

custom 方法参数说明

• fontFamily：http://iconfont.cn 项目的 font-family，详见项目配置

• prefix：http://iconfont.cn 项目中的 Symbol 前缀，详见项目配置

• css：http://iconfont.cn 项目生成的在线 CSS CDN 地址

自定义类型 type 说明

CustomIcon 组件的 type 值其实是 iconfont.cn 每一个图标的 symbol 名称，获取方法是在 iconfont.cn 后台选择复制代码，如结果是 icon-dianpu，同时配置的 prefix 为 icon ，此图标的 type 类型即为 dianpu

注意：如果您在同一个项目中引入多个 iconfont.cn 的项目，请确保项目的 font-family 及 symbol prefix 都不相同，以避免全局命名的冲突。

QA

Q 如何从 http://iconfont.cn 获取项目信息？

A 进入 iconfont.cn 的项目列表，选择 Font class 可以获取项目的(1)在线 CDN 地址

选择(2)更多操作 - 项目信息可以查看和修改项目的 font-family 及 symbol prefix

代码示例

简单的用法

本 Demo 演示最基础的用法。

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import DynamicIcon from '@icedesign/dynamic-icon';
import { Button } from '@alifd/next';
const CustomIcon = DynamicIcon.create({
  fontFamily: 'iceicon2',
  prefix: 'ice-icon-stable',
  css: 'https://at.alicdn.com/t/font_107674_7dns782b1jsb57b9.css'
});
class App extends Component {
  state = {};
  render() {
    return (
      <div>
        自定义图标集图标：
        <div>
          <Button type="primary">
            <CustomIcon size="s" type="qrcode" /> 你好世界
          </Button>
        </div>
        <div>
          <CustomIcon type="cascades" />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

示例图标

展示更多的用法

查看源码在线预览

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CopyToClipboard from 'react-copy-to-clipboard';
import { Message } from '@alifd/next';
import DynamicIcon from '@icedesign/dynamic-icon';
const CustomIcon = DynamicIcon.create({
  fontFamily: 'iceicon2',
  prefix: 'ice-icon-stable',
  css: 'https://at.alicdn.com/t/font_107674_7dns782b1jsb57b9.css'
});
const all = [
  'bangzhu',
  'cascades',
  'home2',
  'activity',
  'qrcode',
  'light',
  'link',
  'copy',
  'creative',
  'phone',
  'angle-down',
  'edit',
  'hourglass',
  'coupons',
  'repair',
  'shopcar',
  'cross',
  'clock',
  'search',
  'message',
  'exchange',
  'delete',
  'angle-up',
  'redpacket',
  'speaker',
  'transfer-left',
  'transfer-right',
  'customize',
  'down',
  'publish',
  'attachment',
  'eye',
  'location',
  'backward',
  'forward',
  'rmb',
  'notice',
  'yonghu',
  'shop',
  'fans2',
  'chart',
  'lock',
  'code',
  'horn',
  'home',
  'bell',
  'person',
  'bold',
  'background-color',
  'font-color',
  'underline',
  'italics',
  'font-size',
  'ol-list',
  'align-center',
  'align-flex',
  'float-full',
  'float-left',
  'quote',
  'align-right',
  'align-left',
  'ul-list',
  'store',
  'topic',
  'anchor',
  'video',
  'sucai',
  'picture',
  'gif',
  'task',
  'guanbi',
  'question',
  'mail',
  'image',
  'question2',
  'key',
  'content',
  'edit2',
  'menu',
  'collapse',
  'correct',
  'directory',
  'fans',
  'compass',
  'quote2',
  'gif2',
  'pin',
  'video2',
  'item',
  'material',
  'shezhi',
  'skin_light',
  'requ'
];
class App extends Component {
  copied = () => {
    Message.success('复制成功！');
  };
  renderIcon = (type, idx) => {
    return (
      <div
        style={{
          display: 'inline-block',
          minWidth: '150px',
          marginBottom: '15px',
          cursor: 'pointer'
        }}
        key={idx}
      >
        <CustomIcon size="large" type={type} />
        <CopyToClipboard text={type} onCopy={this.copied}>
          <span style={{ marginLeft: '5px' }}>{type}</span>
        </CopyToClipboard>
      </div>
    );
  };
  render() {
    return <div>{all.map(this.renderIcon)}</div>;
  }
}
ReactDOM.render(<App />, mountNode);

相关区块

暂无相关区块