使用fusion团队制作的React开源组件库 Fusion 制作可以引用iconfont矢量图标项目的React组件
参考官方文档：https://fusion.design/pc/component/basic/icon
Github Repository：https://github.com/SHENLing0628/REACT_PRACTICE
一、引用在线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）：
- 图标大小： 参数：size 可选值：xxs, xs, small, medium, large, xl, xxl, xxxl, inherit 默认值：medium
- 图标样式： 参数：type 可选值：iconfont工程文件图标名称，直接复制粘贴即可
- 其他说明：
若更新iconfont图标库，则需将新的URL复制替换下方的sriptUrl
四、效果样例
sample
