Vue：使用unplugin-icons自定义本地图标集

Nephilim 2024-07-17

762

Tips：一些记录，一些笔记

2024/07/17

WEDNESDAY

All is not gain that is put in the purse is not necessarily.

装进钱包里的不一定都是收益。

unplugin-icons

在前面，通过unplugin-icons引入了网上的图标：

Vue3 + Vite：SVG图标（unplugin-icons）

也通过vite-plugin-svg-icons引入了本地的图标：

Vue.JS：引入SVG资源更好的方式

本文来将虾如何通过unplugin-icons定义本地的图标。

配置文件「vite.config.ts」

配置还是都在「vite.config.ts」文件中完成的。

具体如下：

引入：

// 图标（unplugin-icons）
// pnpm install -D unplugin-icons
import Icons from 'unplugin-icons/vite'
// 解释器
import IconsResolver from 'unplugin-icons/resolver'
// Loader
import { FileSystemIconLoader } from 'unplugin-icons/loaders'

配置：

「Components」中：

// 图标（unplugin-icons）
IconsResolver({
  // 自动引入组件「Icon」的统一前缀：默认为「i」
  prefix: 'icon',
  // 可选配置：默认启用 Iconify
  // enabledCollections: ['ep']
  // 自定义图标模块集合
  customCollections: ['user', 'home']
}),

「Icons」组件：

Icons({
  compiler: 'vue3',
  autoInstall: true,
   放大比例
  scale: 4,
   自定义图标模块集合
  customCollections: {
     user图标集，给svg文件设置 fill="currentColor" 属性，使图标的颜色具有适应性
    user: FileSystemIconLoader("src/assets/svgs/user", (svg) =>
      svg.replace(/^<svg , '<svg fill="currentColor" ')
    ),
     home 模块图标集
    home: FileSystemIconLoader("src/assets/svgs/home", (svg) =>
      svg.replace(/^<svg , '<svg fill="currentColor" ')
    ),
  },
}),

这个时候，该文件的完整配置：

// =============================== 导入


// Basic
import { fileURLToPath, URL } from 'node:url'
import { resolve } from 'node:path'
import path from 'path'


// Vite
import { defineConfig, loadEnv } from 'vite'
import type { UserConfig, ConfigEnv } from 'vite'


// Vue
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import vueDevTools from 'vite-plugin-vue-devtools'


// Element Plus
// pnpm install -D element-plus
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// 自动引入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
  VueUseComponentsResolver,
  VueUseDirectiveResolver
} from 'unplugin-vue-components/resolvers'


// 图标（unplugin-icons）
// pnpm install -D unplugin-icons
import Icons from 'unplugin-icons/vite'
// 解释器
import IconsResolver from 'unplugin-icons/resolver'
// Loader
import { FileSystemIconLoader } from 'unplugin-icons/loaders'


// 图标（vite-plugin-svg-icons）
// pnpm install -D vite-plugin-svg-icons
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'


// =============================== 配置
// https://vitejs.dev/config/


// 实例化
const root = process.cwd()


function pathResolve(dir: string) {
  return resolve(root, '.', dir)
}


export default ({ command, mode }: ConfigEnv): UserConfig => {
  // 环境相关变量与参数
  let env = {} as any


  // 判断是否执行了「打包」
  const isBuild = command === 'build'
  if (!isBuild) {
    env = loadEnv(process.argv[3] === '--mode' ? process.argv[4] : process.argv[3], root)
  } else {
    env = loadEnv(mode, root)
  }


  // 返回最终配置
  return {
    base: '/', // 后期写到环境变量的文件中
    // 插件
    plugins: [
      vue({
        script: {
          // 开启 defineModel
          defineModel: true
        }
      }),
      vueJsx(),
      vueDevTools(),
      Icons({
        compiler: 'vue3',
        autoInstall: true,
        // 放大比例
        scale: 4,
        // 自定义图标模块集合
        customCollections: {
          // user图标集，给svg文件设置 fill="currentColor" 属性，使图标的颜色具有适应性
          user: FileSystemIconLoader("src/assets/svgs/user", (svg) =>
            svg.replace(/^<svg , '<svg fill="currentColor" ')
          ),
          // home 模块图标集
          home: FileSystemIconLoader("src/assets/svgs/home", (svg) =>
            svg.replace(/^<svg , '<svg fill="currentColor" ')
          ),
        },
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/svgs')],
        symbolId: 'icon-[dir]-[name]',
        svgoOptions: true
      }),
      AutoImport({
        // 需要去解析的文件
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          \.vue$/,
          /\.vue\?vue/, // .vue
          \.md$/ // .md
        ],
        // imports 指定自动引入的包位置（名）
        imports: ['vue', 'pinia', 'vue-router', '@vueuse/core'],
        // 生成相应的自动导入json文件。
        eslintrc: {
          // 启用
          enabled: true,
          // 生成自动导入json文件位置
          filepath: './.eslintrc-auto-import.json',
          // 全局属性值
          globalsPropValue: true
        },
        resolvers: [
          // Element Plus
          ElementPlusResolver()
        ]
      }),
      Components({
        // 指定组件所在的目录
        dirs: ['src/components', 'src/views'],
        // 需要解析的文件
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        // 解释器
        resolvers: [
          // 图标（unplugin-icons）
          IconsResolver({
            // 自动引入组件「Icon」的统一前缀：默认为「i」
            prefix: 'icon',
            // 可选配置：默认启用 Iconify
            // enabledCollections: ['ep']
            // 自定义图标模块集合
            customCollections: ['user', 'home']
          }),
          // Element Plus
          ElementPlusResolver(),
          // VueUse
          VueUseComponentsResolver(),
          VueUseDirectiveResolver()
        ]
      })
    ],
    resolve: {
      // 别名
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    // 样式
    css: {
      preprocessorOptions: {
        less: {
          additionalData: ``
        },
        scss: {
          prependData: ``,
          additionalData: `
             自定义字体样式
            @use "@/assets/fonts/index.scss" as *;
          `
        }
      }
    },
    // 服务端
    server: {
      host: env.VITE_APP_HOST || '0.0.0.0',
      port: env.VITE_APP_PORT || 4001,
      strictPort: true
    },
    // 打包
    build: {
      target: 'es2015',
      // 打包导出目录
      outDir: 'dist',
      sourcemap: env.VITE_IF_SOURCEMAP === 'true',
      // brotliSize: false,
      rollupOptions: {
        // 拆包
        output: {
          manualChunks: {
            'vue-chunks': ['vue', 'vue-router', 'pinia', 'vue-i18n']
            // 'element-plus': ['element-plus'],
            // 'wang-editor': ['@wangeditor/editor', '@wangeditor/editor-for-vue']
          }
        }
      }
    }
  }
}

上传本地SVG图标

根据前面的配置，在「src/assets/svgs」下，创建目录「user home」，并在其中放入一些图标：

使用

最后，就可以在页面中使用了：

效果如下：

该页面的完整代码如下:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1>
      <icon-material-symbols-10k-sharp >
      <icon-material-symbols-11mp-outline-sharp >
      <svg-icon class="icon" size="45" name="logo" >
    </h1>


    自定义的 Icon 图标
    <icon-home-home >
    <icon-user-user />


    <div
      class="inline-block m-2 rounded cursor-pointer shadow transition-all duration-150 ease-in-out transform hover:scale-105"
    >
      <span class="bg-blue-500 text-white px-2 py-1 rounded-l">Search</span>
      <span class="bg-blue-700 text-white px-2 py-1 rounded-r font-bold">搜索</span>
    </div>


    <div
      class="inline-block m-2 rounded cursor-pointer shadow transition-all duration-150 ease-in-out transform hover:scale-105"
    >
      <span class="bg-gray-500 text-white px-2 py-1 rounded-l">Search</span>
      <span class="bg-green-400 text-white px-2 py-1 rounded-r">搜索</span>
    </div>


    <el-button>{{ message }}</el-button>


    <el-button :plain="true" @click="open2">Success</el-button>
  
  </div>
</template>


<script lang="ts" setup>
import { ElMessage } from 'element-plus'


const message = ref('Helloworld.')


const open2 = () => {
  ElMessage({
    message: 'Congrats, this is a success message.',
    type: 'success'
  })
}
</script>


<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

至此，在Vue中，通过unplugin-icons，自定义本地图标集（库），演示完成。

END

温馨提示

如果你喜欢本文，请分享到朋友圈，想要获得更多信息，请关注我。

文章转载自Nephilim，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

Vue：使用unplugin-icons自定义本地图标集

评论