关于vue.js:阿里iconfont在vuereact中引用及使用

27次阅读

共计 685 个字符,预计需要花费 2 分钟才能阅读完成。

1. 下载下来所须要的 icon,解压后失去文件:

2. 将文件放到我的项目外面:

在 react.js 外面:

在 public 外面新建一个文件夹 iconfont(无要求),将文件放进去

index.html中援用

<link rel="stylesheet" href="./iconfont/iconfont.css" />

如果不是本地运行,能够全局配置PUBLIC_URL

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="%PUBLIC_URL%/iconfont/iconfont.css" />

在组件中利用:
简略利用,icon 不变动状况下:

<span className="icon iconyonghu"></span>

icon 可配置,能够批改变动,此处 icon 为可变动参数:

<span className={`iconfont ${icon || 'iconyonghu'}`}></span>
在 Vue.js 外面:

在 asssets 中新建一个文件夹 iconfont(无要求),将文件放进去

在组件中利用:
在组件中引入

import '../assets/iconfont/iconfont.css';

简略利用,icon 不变动状况下:

<span class="iconfont iconzhuti"></span>

icon 可配置,能够批改变动,此处 i~~~~con 为可变动参数

<span class="iconfont"  :class="item.icon ||'iconzhuti'"></span>

正文完
 0