前端组件库

Appearance

Return to top
On this page

SvgIcon 组件示例

示例：

外链:
加载本地svg:
<template>
  <div>
    外链:<lz-svg-icon icon-class="https://shop.jczxw.cn/logo.svg" />
    <hr />
    加载本地svg:<lz-svg-icon icon-class="edit" />
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss"></style>

<template>
  <div>
    外链:<lz-svg-icon icon-class="https://shop.jczxw.cn/logo.svg" />
    <hr />
    加载本地svg:<lz-svg-icon icon-class="edit" />
  </div>
</template>

<script lang="ts" setup></script>

<style scoped lang="scss"></style>

组件介绍

SvgIcon组件用于展示svg图标。

安装vite-plugin-svg-icons包

bash
pnpm install -D vite-plugin-svg-icons

pnpm install -D vite-plugin-svg-icons
1

vite.config.ts添加：

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    /* createSvgIconsPlugin 待添加 */ 
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__'
    }) as any
  ],
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    /* createSvgIconsPlugin 待添加 */ 
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[name]',
      inject: 'body-last',
      customDomId: '__svg__icons__dom__'
    }) as any
  ],
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

main.ts注入

js
import 'virtual:svg-icons-register'

import 'virtual:svg-icons-register'
1

直接把内容复制到src\vite-env.d.ts (没有自行创建)

js
declare module 'virtual:svg-icons-register' {
    const content: any;
    export default content;
}
declare module 'virtual:svg-icons-names' {
    // eslint-disable-next-line
    const iconsNames: string[]
    export default iconsNames
}

declare module 'virtual:svg-icons-register' {
    const content: any;
    export default content;
}
declare module 'virtual:svg-icons-names' {
    // eslint-disable-next-line
    const iconsNames: string[]
    export default iconsNames
}
1
2
3
4
5
6
7
8
9

属性

属性名称属性值类型属性描述
icon-classstringsrc/assets/icons/logo.svg（传logo即可）
classNamesrc/assets/icons/logo.svg（传logo即可）

方法

无

插槽

无