Iconify 离线

一、使用本地 Iconify 图标

• 安装依赖

//package.json
{
  "devDependencies": {
    "@iconify/json": "^2.1.145",
    "unplugin-icons": "^0.15.1",
    "unplugin-vue-components": "^0.22.12",
  }
}

•  配置Vite插件 

// vite.config.js
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver';
import Components from 'unplugin-vue-components/vite'

return {
    plugins: [
        vue(),
        Icons({compiler: 'vue3', autoInstall: true}),
        Components({
           // imports 指定组件所在位置，默认为 src/components; 有需要也可以加上 view 目录
           dirs: ['src/components/import'],
           //prefix :图标前缀
           resolvers: [IconsResolver({ prefix: 'icon' })],
        }),
    ]
}

•  使用

// <前缀-图标库名称-图标名称>
<icon-fa6-solid-map-location-dot  style="margin-right: 0.104rem"/>

二、使用纯 CSS 图标（unocss原子化）

•  添加依赖

yarn add-D unocss @unocss/preset-icons @iconify/json

•  配置Vite插件 

// vite.config.js
import UnoCSS from 'unocss/vite';
import UnoCssIcons from '@unocss/preset-icons'
           
return {
    plugins: [
        vue(),
         UnoCSS({
            presets: [
               UnoCssIcons({
               prefix: 'i-',
               extraProperties: {
               display: 'inline-block'
               }}),
                /**
                第一个是工具类预设，一系列流行的原子化框架的 通用超集，包括了 Tailwind CSS
                Windi CSS，Bootstrap，Tachyons 等,若使用原子化css定义Icon样式的话，这个需要                
                打开
                */
               // 第二个是属性化模式支持,属性语义化 无须class
               // 第三个是icon支持,开启可能会报冲突，可以注释掉
               presetUno(),
               //presetAttributify(),
               //presetIcons()
                ],
            })
    ]
}

• main.ts 引入

// main.ts
import 'uno.css'

•   使用

// class内 前缀-图标库名称:图标名称
<div class="i-fa6-solid:map-location-dot"/>