icons

前言

在使用element-plus组件库开发后台管理系统时图标不够用

一、使用icons插件库

下载

npm i -D unplugin-icons

配置

由于我使用的是vite所以这里介绍vite

// vite.config.ts
import Icons from 'unplugin-icons/vite'

export default defineConfig({
  plugins: [
    Icons({ /* options */ }),
  ],
})

其他的配置去https://github.com/antfu/unplugin-icons#configuration查看

options的配置：

Icons({
  scale: 1.2, // Scale of icons against 1em
  defaultStyle: '', // Style apply to icons
  defaultClass: '', // Class names apply to icons
  compiler: null, // 'vue2', 'vue3', 'jsx'
  jsx: 'react', // 'react' or 'preact'
})

配置完成后

去哪里查看图标？

图标库

图标库地址：https://icones.js.org/
全部下载

npm i -D @iconify/json

使用：
找到要使用的图标之后点击Unplugin Icons

<template>
<MaterialSymbols360  />
</template>

<script setup>
import MaterialSymbols360 from '~icons/material-symbols/360'
</script>

二、优化

此时使用图标还是要import 还是很麻烦，有没有什么办法帮我们自动引入

1.下载

pnpm i unplugin-vue-components -D

2.配置

vite配置

import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'


export default {
  plugins: [
    Components({
      resolvers: [
        IconsResolver()
      ],
    }),
  ],
}

其他配置：https://github.com/antfu/unplugin-icons#migrate-from-vite-plugin-icons

3.使用

此时使用方式和刚刚略微有点不同
还是刚刚的图标网址
找到想要的图标后直接点击复制名字

将“：”改为“-” 在最前面添加一个“i-”

即可