欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

阿里字体图标库的使用

程序员文章站 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