侧边栏壁纸
  • 累计撰写 198 篇文章
  • 累计创建 105 个标签
  • 累计收到 36 条评论
vue

vue3之Icon自动引入——unplugin-icons

神兵小将
2022-04-17 / 0 评论 / 0 点赞 / 138 阅读 / 1,199 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

安装

使用命令

pnpm add -D unplugin-icons

配置

vite.confi.ts配置:

import Icons from "unplugin-icons/vite";
plugins:[
Icons({
      autoInstall: true,
      compiler: "vue3",
    }),
    ]

支持的配置

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'
})

image-1650202222913

使用

在https://icones.netlify.app/网站上找到想使用的图标
点击下图所示的按钮,即可复制图标
image-1650202527479

直接在vue中使用即可。

<script setup lang="ts">
	import IconoirAddHexagon from "~icons/iconoir/add-hexagon";
</script>
<template>
	<IconoirAddHexagon style="font-size: 12em; color: red" />
</template>

image-1650202760147

Icon图标自动引入

这里需要配合 unplugin-vue-components组件使用。

地址:https://github.com/antfu/unplugin-vue-components

配置


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


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

使用

选中复制名称即可,例如iconoir:add-pin-alt,直接点击下图所示的地方。
image-1650203260358

注:使用Icon自动引入,不需要下载图标库,系统会自动按需下载。

前面需要添加前缀i

<i-iconoir:add-pin-alt style="font-size: 12em; color: red" />

image-1650203430031

图标引入完成,每天学习一招,又大大提高了开发效率。

0

评论区