阿里icon图标的使用

开源

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

Unicode

特点

• 兼容性好，可以支持ie6以上；
• 不支持多色图标；
• 支持按照字体的方式去动态调整图标大小，颜色等；
• 在不容的设备浏览器环境中渲染会产生略微的差别，在不同浏览器或系统对文字的渲染不同，他们显示的未知和大小都会受到font-size，line-height等css属性的影响；

使用步骤

• 直接使用线上地址；
• 下载到本地本地中使用；

• 复制以下代码到新建的iconfont.css文件中引入到index.html；也可以直接引入到index.html中；

<style type="text/css">
@font-face {
  font-family: 'iconfont';  /* Project id 3321316 */
  src: url('//at.alicdn.com/t/font_3321316_lgon82urrge.woff2?t=1649851478037') format('woff2'),
       url('//at.alicdn.com/t/font_3321316_lgon82urrge.woff?t=1649851478037') format('woff'),
       url('//at.alicdn.com/t/font_3321316_lgon82urrge.ttf?t=1649851478037') format('truetype');
}

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
</style>

• 项目使用

<i class="iconfont">&#xe72a;</i>

Font Class

特点

• 兼容性较好，支持ie8以上；
• 不支持多色图标；
• 比unicode语义明确，书写直观；

使用步骤

• 直接使用线上地址；
• 下载到本地本地中使用；

• 引入至index.html中

<link href="//at.alicdn.com/t/font_1000117_n3ngonecs7.css" rel="stylesheet" type="text/css"/><!--线上（推荐开发测试用）-->
<link href="./static/iconfont.css" rel="stylesheet" type="text/css"/><!--本地（推荐项目上线用）-->

• 项目使用

<i class="iconfont icon-kongzhi"/>

Symbol

特点

• 兼容性一般，支持ie9以上；
• 支持多色图标；
• 支持通过font-size，color调整样式；
• 可利用CSS实现动画；
• 减少HTTP请求次数；
• 矢量，缩放不会失真；

使用步骤

• 直接使用线上地址；
• 下载到本地本地中使用；

• 在index.html文件中引入

<script src="//at.alicdn.com/t/font_1000117_n3ngonecs7.js"></script><!--引入线上的地址（推荐开发用）-->
<script src="./static/iconfont.js"></script><!--引入下载后的iconfont.js文件（推荐线上用）-->

• 设置通用的css样式

.icon {
       width: 1em;
       height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }

• 在项目中使用，xlink:href="#icon-aixin（图标类名）"

<svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-aixin"></use>
</svg>

Symbol出现无法修改颜色的问题

无法设置的原因是没有清除默认设置，需要在阿里图标中先消除默认设置，再使用图标即可自行设置样式；

步骤

• 第一步

• 第二步

Vue3 ant-design-vue图标的使用

先安装 npm install --save @ant-design/icons-vue

按需导入

<template>
  <div class="router-go">
    <left-outlined />
    <right-outlined />
  </div>
</template>

<script lang="ts" setup>
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
</script>

全部导入

// 在main.ts 中导入

import * as Icons from '@ant-design/icons-vue';

// 原本链式变成，替换掉
const app = createApp(App)
styleImport(app).use(router).use(store, key).mount('#app')

// 开始使用全局图标导入
const icons : any = Icons;
for (const i in icons) {
   app.component(i,icons[i])  // 全局注册组件
}