# svg-icon

**Repository Path**: wudandong/svg-icon

## Basic Information

- **Project Name**: svg-icon
- **Description**: 基于 @iconify/vue 工具封装的动态图标组件，vue3 版。支持本地 svg 文件和图片。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-06-30
- **Last Updated**: 2025-02-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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 组件

  ```ts
    // 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 图标库代理

  ```ts
    // 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/>

  ```vue
    <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) 安装依赖

    ```sh
      pnpm i vite-plugin-svg-icons - D
    ```

    > 如果提示需要安装 fast-glob ，则继续安装 pnpm i fast-glob -D
  
  - (2) 加载本地 svg 资源

    ```ts
      // 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 中引入虚拟依赖

    ```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 值来判断类型