如何将ICONFONT在线/离线引入REACT前端项目中

阿申申Cindy
3,392 阅读3分钟

一般来说，有两种引入该项目的方法：离线和在线

  • 具体使用方法参考iconfont的使用说明

1. 创建iconfont项目

  • 登录iconfont网站，进入我的项目页面

  • 点击以下按钮，添加新项目

  • 搜索图标

  • 选择图标添加进入购物车

  • 点击购物车按钮，选择添加至项目按钮

  • 选择刚才在上文中创建的项目TEST_PROJECT

  • 网页则自动跳转回“我的项目页面”，至此，你的项目已经创建完毕，并存在图标了

2. 在线引入react项目

  • 我们采用https://github.com/SHENLing0628/React-Webpack4-Scaffold这个里面建立的空白的react脚手架来进行配置

  • 在ICONFONT我的项目里面按照下图所示，选择以下按钮：symbol/查看在线链接/点击复制代码

  • 进入react项目中的src/index.html文件，在部分添加以下代码：

<script type="text/javascript" src="http://at.alicdn.com/t/font_1613454_ffibjw41w3q.js"></script>

注意，其中http后面的部分，即为你在iconfont项目页面中点击复制的代码部分：

  • 使用测试：
  1. 在components文件夹里面建立一个公共组件IconComponent：
// src/components/IconComponent
import React from 'react'

class IconComponent extends React.Component {
	render () {
		const { icon, className, ...other } = this.props
		return (
			<svg className={`icon ${className}`} { ...other } aria-hidden="true">
				<use xlinkHref={icon}></use>
			</svg>
		)
	}
}

export default IconComponent
  1. 然后我们进入pages/main的index.js里面，引用这个组件
import React from 'react'
import './index.scss'
import SampleAction from 'actions/sample'
import { Button } from 'antd'
import Common from 'components/common'
import IconComponent from 'components/IconComponent' //引用IconComponent组件

export default class Main extends React.Component {

	constructor (props) {
		super(props)
		this.state = {
      
		}
	}

	componentDidMount () {
		this.requestInfo()
	}

	requestInfo = async () => {
		console.log(SampleAction)
		let res = await SampleAction.getAlgorithmsInfo({ code:'simple2complex' })
		console.log(res)
	}

	render () {
		return (
			<div className='main'>
				<Common/>
				
				{/* 使用Iconfont组件 */}
				<IconComponent className='icon' icon='#iconLogininvalidx'/> 
				
				<Button type='primary'>TEST</Button>
				<button>normal button</button>
			</div>
		)
	}
}

注意：上面在使用组件的时候，向icon参数中传递的带#号的字符串，是在iconfont网页页面在线复制的：（注意不要删除#号）

  1. 显示结果：

3. 离线引入react项目

  • 如果react项目需要部署/调试的环境均必须保持离线状态，存在着和外界互联网的物理/逻辑隔离，那么需要将iconfont离线部署到我们的前端项目中，而不用将iconfont中的图标一个个下载下来

  • 点击“我的项目”中的“下载至本地”按钮：

  • 打开压缩包后显示为如下文件：

  • 双击demo_index.html后，会在浏览器显示如何进行引用

  • 使用方法：

  1. 在src/assets文件夹下，建立文件夹iconfont，存入解压后的文件iconfont.js

  2. 在src/index.html文件的标签中添加以下代码:

<!-- 离线调用iconfont工程 -->
<script type="text/javascript" src="src/assets/iconfont/iconfont.js"></script>

<style type="text/css">
    .icon {
        fill: currentColor;
        overflow: hidden;
    }
</style>
  1. 还需要在index.js中导入该文件：
import 'src/assets/iconfont/iconfont.js'
  1. 然后就可以和上面离线使用中采用的方法一样，使用我们创建的IconComponent组件使用该组件了：
{/* 使用Iconfont组件 */}
<IconComponent className='icon' icon='#iconLogininvalidx'/>
  1. 运行效果：

3. iconfont的其他实用操作 --- 添加协同工作人员：

当你创建了iconfont的项目后，可以添加协同工作的人员账号，这样所有该项目的人，都可以对这里的iconfont项目进行修改和引用了，便于协同工作：

avatar
文章
阅读
粉丝