阿里字体图标库的使用

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文件夹

全局引入iconfont.css文件，就可以使用了，

  <span class="a"></span>

  .a:before {
    content: '\100d9';
    font-size: 36px;
    color: red;
    font-family: 'iconfont';
  }

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

  .a:before {
    content: '\100d9';
    font-size: 36px;
    color: red;
  }