vue3 + vite 项目搭建 - 配置图标库

安装依赖

yarn add unplugin-icons unplugin-vue-components --dev
或者
npm i -D unplugin-icons unplugin-vue-components

配置vite.config.ts (自定义图标)

import UnpluginVueComponents from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

export default defineConfig({
	plugins: [
		 UnpluginVueComponents({
	        dts: true,
	        resolvers: [
	          IconsResolver({
	            customCollections: ['custom']
	          })
	        ]
	      }),
		Icons({
        compiler: 'vue3',
        customCollections: {
        	// 这里是存放svg图标的文件地址，custom是自定义图标库的名称
          custom: FileSystemIconLoader('./src/assets/icons')
        }
      })
	]
})

使用自定义图标

假如我在 src/assets/icons目录下存在一个名为 refresh-line.svg的图标

	<i-custom-refresh-line />
	// 结合element的icon组件
	<el-icon size="30">
      <i-custom-refresh-line />
    </el-icon>

上面就是使用方法，结构为

{prefix}-{collection}-{icon}
{前缀（默认i）}-{图标集名称（custom）}-{图标名称（refresh-line）}

使用@iconify-json提供的图标集

// 安装所有图标集，只会打包使用到的图标集，不用担心全部捆绑打包
npm i -D @iconify/json

// 或者只使用到几个图标集，可以单独安装
npm i -D @iconify-json/mdi

使用图标

	<i-mdi-abacus />
	<el-icon size="30">
      <i-mdi-abacus />
    </el-icon>

unplugin-icons详细文档

iconify所有图标集

最后

以上就是花痴春天为你收集整理的vue3 + vite 项目搭建 - 配置图标库的全部内容，希望文章能够帮你解决vue3 + vite 项目搭建 - 配置图标库所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。