Fusion组件库引用 IconFont 项目（在线+离线方法）

使用fusion团队制作的React开源组件库 Fusion 制作可以引用iconfont矢量图标项目的React组件

参考官方文档：https://fusion.design/pc/component/basic/icon
Github Repository：https://github.com/SHENLing0628/REACT_PRACTICE

• Iconfont Online src/components/OnlinelineIconfont
• Iconfont Ofiiline src/components/OfflineIconfont

一、引用在线ICONFONT项目方法

1. 获取在线ICONFONT文件夹

• 前往 iconfont 官方网站
• 将所需要的图标添加或上传至自己的项目中

• 复制Symbol类型下的在线链接（注意：每一次更新项目中的icon，需要重新获取链接代码）

  
  
  iconfont项目

2. React组件代码：

import React from 'react'
import { Icon } from '@alifd/next'

export default class IconFont extends React.Component {
    onClickIcon = () => {
        console.log('icon')
    }
    render () {
        const { type, size, style, className, onClick } = this.props
        const CustomIcon = Icon.createFromIconfontCN({
            scriptUrl: '//at.alicdn.com/t/font_1613454_yli8sjj1jpo.js', // 引用在线iconfont包方法
        })
        return (
            <CustomIcon
                onClick={onClick}
                className={className}
                type={type}
                size={size}
                style={style}
            />
        )
    }
}

二、引用离线ICONFONT项目文件的方法

1. 获取ICONFONT离线文件并放入web项目的public文件夹中

• 下载ICONFONT项目文件

  
  
  下载iconfont文件

• 解压缩download.zip，拿到iconfont.js文件

  
  
  iconfont.js文件

• 将iconfont.js文件放入public文件夹

  
  
  public文件夹

2. 修改REACT项目中，IconFont组件代码中scriptURL的链接为"iconfont.js"

import React from 'react'
import { Icon } from '@alifd/next'

export default class OfflineIconfont extends React.Component {
    onClickIcon = () => {
        console.log('icon')
    }
    render () {
        const { type, size, style, className, onClick } = this.props
        const CustomIcon = Icon.createFromIconfontCN({
            scriptUrl: 'iconfont.js' // 修改此处，引用iconfont离线文件
        })
        return (
            <CustomIcon
                onClick={onClick}
                className={className}
                type={type}
                size={size}
                style={style}
            />
        )
    }
}

三、组件使用说明

• 使用样例

import OnlineIconFont from './components/OnlineIconFont'
import OfflineIconfont from './components/OfflineIconfont'

function App() {
  return (
    <div className="App">
      <div>ONLINE ICON: </div>
      <OnlineIconFont type="iconcode" size="xs" />
      
      <div>OFFLINE ICON</div>
      <OfflineIconfont type="iconstation_icon_offline" size="xs" />
    </div>
  );
}

export default App;

• 使用文档（参考icon组件文档 https://fusion.design/pc/component/basic/icon）：

1. 图标大小： 参数：size 可选值：xxs, xs, small, medium, large, xl, xxl, xxxl, inherit 默认值：medium
2. 图标样式： 参数：type 可选值：iconfont工程文件图标名称，直接复制粘贴即可

• 其他说明：
  若更新iconfont图标库，则需将新的URL复制替换下方的sriptUrl

四、效果样例

sample