Svg Icon

基于 @iconify/vue 工具封装的动态图标组件

资源类型

svg-icon 支持 3 中类型的图标

• iconify：通过在线图标库服务加载图标
• svg：加载本地项目文件夹中的 svg 文件，需要在 vite.config.ts 中引入插件
• online: 加载在线的图片资源，包括：jpg、png、gif、svg 等格式

icon 值包含 http 或以 / 开头的加载在线图片资源，包含 : 的会加载 iconify 数据，否则加载本地 svg 资源

使用步骤

• 1、安装

  pnpm i svg-icon-iconify

• 2、引入 svg-icon 组件

    // main.ts
    import { createApp } from "vue"
    import SvgIcon from 'svg-icon-iconify'
  
    const app = createApp(App)
    app.use(SvgIcon)
    app.mount("#app");
  
    // （可选）如果内网部署，需要配置 svg-icon 源和前缀
    // app.use(SvgIcon, {
    //   iconOrigin: '/iconify', // 默认值：/iconify 。非必填。图标库服务路径，可使用 http 开头的 url
    //   iconPrefix: 'custom_pre', // 默认值：'' 。非必填。私有图标库命名空间前缀，设置该前缀时，使用 <svg-icon> 也需要传入该前缀，例如：<svg-icon prefix="custom_pre" icon="mdi:home" />
    // })

• 3、设置 iconify 图标库代理

    // vite.config.ts
    export default defineConfig({
      server: {
        proxy: {
          '/iconify': {
            target: 'http://172.21.44.57:3000/', // 图标服务
            rewrite: (path) => path.replace(/^\/iconify/, ''),
          },
        },
      },
    })

• 4、使用

  图标集合网址，用于查询图标:

  • 官方网站 https://icon-sets.iconify.design/

    <template>
        <!-- 默认用法 在网站中查到的图标名称 mdi:home -->
        <svg-icon icon="mdi:home" />
  
        <!-- 设置样式 -->
        <svg-icon icon="bx:baguette" style="font-size: 50px" color="red" rotate="90deg" />
  
        <!-- 如果是 svg，则加载本地图标，该方式需要在 vite.config.ts 中引入插件，参见第 5 步 -->
        <!-- 本地 svg 图标，路径 src/icons/svg/bug.svg -->
        <svg-icon icon="bug" />
  
        <!-- 本地 svg 图标，路径 src/icons/svg/test/build.svg -->
        <svg-icon icon="test-build" /> 
  
        <!-- 可以借助 el-icon 设置样式 -->
        <el-icon color="red" title="home" size="30">
            <svg-icon icon="mdi:home" />
        </el-icon>
  
        <!-- 在 el-button 中使用 -->
        <el-button type="primary">
            <svg-icon icon="mdi:home" />
        </el-button>
  
        <!-- 加载在线图片 -->
        <svg-icon icon="http://localhost:8080/assets/user.png" />  <!-- icon 值包含 http，会加载在线资源 -->
        <svg-icon icon="/assets/user.png" />  <!-- icon 为 / 开头的静态资源地址，以当前域加载当前域资源 -->
    </template>

• 5、(可选) 如果需要加载本地 svg 资源

  • (1) 安装依赖

      pnpm i vite-plugin-svg-icons - D

    如果提示需要安装 fast-glob ，则继续安装 pnpm i fast-glob -D

  • (2) 加载本地 svg 资源

      // vite.config.ts
      import path from 'node:path'
      import type { Plugin } from 'vite'
      import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
    
      export default defineConfig({
          plugins: [
              createSvgIconsPlugin({
                // 指定要缓存的图标文件夹
                iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
                // 执行icon name的格式
                symbolId: 'icon-[dir]-[name]',
              })
          ],
      })

  • (3) 在 main.ts 中引入虚拟依赖

    // main.ts
    import 'virtual:svg-icons-register'

<svg-icon> 标签配置项

配置项 | 数据类型 | 是否必传 | 默认值 | 说明 -|-|-|-|- icon|string | true | - | svg名称或路径 class|string | false | - | 组件类名 color|string | false | - | 颜色 size| string | number |false | - | 大小 disabled| boolean | false | false | 是否禁用

更新日志

• 0.1.0 发布 svg-icon 工具组件
• 0.1.2 2023-07-31
  • 解决本地资源不能正确加载的问题
• 1.2.1 - 2023-08-23
  • 不兼容更新，废弃 type 属性，根据 icon 值来判断类型