@icedesign/awesome-icon
TypeScript icon, indicating that this package has built-in type declarations

0.1.2 • Public • Published

title: AwesomeIcon category: BizComponents chinese: 增强图标组件

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

基本使用示例

import ReactDOM from 'react-dom'
import AwesomeIcon from '@icedesign/awesome-icon';

ReactDOM.render(<AwesomeIcon type="qrcode"/>, mountNode);

自定义 iconfont.cn 项目使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AwesomeIcon from '@icedesign/awesome-icon';

// 使用 custom 生成自定义 ICON 组件
const CustomIcon = AwesomeIcon.custom({
  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 方法参数说明

自定义类型 type 说明

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

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

QA

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

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

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

Readme

Keywords

Package Sidebar

Install

npm i @icedesign/awesome-icon

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

20.9 kB

Total Files

13

Last publish

Collaborators

  • rax-publisher
  • luhengchang228
  • chenjun1011
  • yuanyan
  • zeroling
  • temper357
  • sobear
  • bindoon
  • clarkxia
  • alvinhui
  • aboutblank