阿里字体图标库的使用
程序员文章站
2024-02-14 09:50:10
...
https://www.iconfont.cn/阿里字体图标库网址
选择首页顶部导航栏里面的 资源管理 —》 我的项目
如果还未创建项目,请先创建项目,并添加想要的图标
一.通过symbol引入svg图片(vue项目或者原生框架)
第一步:拷贝项目下面生成的symbol代码:
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
第二步:加入通用css代码(引入一次就行):
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
二.通过symbol引入svg图片(react框架)
第一步
import { createFromIconfontCN } from '@ant-design/icons';
第二步,尽量添上https将地址补全
const IconFont = createFromIconfontCN({
scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
第三步,icon的样式可以自己视情况进行修改,type对应的值就是字体图标库里面每个图标下面对应的字符串名字
<IconFont className="icon" type="iconFrame19"></IconFont>
三.通过symbol引入svg图片(react框架+ umi)
在项目根目录下找到umircs.ts配置文件
在export default defineConfig({
})里面添加 scripts: [
‘https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js’,
],同样记得把地址补全
export default defineConfig({
runtimePublicPath: false,
publicPath: baseURL,
history: {
type: 'hash',
},
scripts: [
'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
]...})
在需要使用图标的地方
icon同样可以自己设置,xlinkHref的值为字体图标对应名称
<svg className="icon" aria-hidden="true">
<use xlinkHref="#icon-xxx"></use>
</svg>
tips:本人亲测失败,失败的同学用方法二,如果方法三有成功的同学能留言说下吗?嘻嘻
使用unicode和font-class方法的同学,去看阿里字体图标库的官网帮助文档吧
https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
上一篇: 树链剖分 复习笔记
推荐阅读