vue3-antd-admin

# 图标

本项目图标推荐使用 antd ui 图标库中图标，并基于此简单封装了a-icon组件，之后还会跟进该组件使其功能更加丰富。如果你在 antd ui 图标库中没有找到需要的图标，可以到 iconfont.cn (opens new window) 上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。

提示

使用svg图标推荐封装成组件，这里可阅读潘大神 手摸手，带你优雅的使用 icon (opens new window)

# 使用a-icon组件

  1. 在antd ui图标库 (opens new window)挑选自己需要的图标，复制他的名称。

  2. 在模板中引入a-icon组件

<template>
  <div>
    <a-icon type="PoweroffOutlined" />
  </div>
</template>
<script lang="ts">
  import aIcon from '@/components/aicon/aicon.vue'
  import { defineComponent, watch, computed, onBeforeMount } from "vue"
  export default defineComponent({
    components: {
      aIcon
    },
  })
</script>

# 生成图标库代码

首先，搜索并找到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。

如果你已经有了设计稿，只是需要生成相关代码，可以上传你的图标后，再进行上面的操作。

图标网站

下载完成可直接引入，也可以按照上述链接文章，封装svg-icon

← 错误处理 →