目录

• vite-plugin-svg-icons 安装
• 配置使用vite-plugin-svg-icons
• 如何在Vue 组件使用
• 优点

vite-plugin-svg-icons是一个Vite插件,其作用是将SVG图标文件转换为Vue组件,以便在Vue项目中使用。

使用vite-plugin-svg-icons插件,可以将SVG图标文件导入到项目中,并将其转换为可复用的Vue组件。这样,就可以像使用普通Vue组件一样使用这些SVG图标,包括在模板中直接使用、传递属性、绑定事件等。

该插件还提供了一些额外的功能,如自动按需引入图标、支持图标的自定义命名、支持指定图标大小等。

总之,vite-plugin-svg-icons插件的作用是简化在Vue项目中使用SVG图标的过程,提供了更加灵活和方便的方式来管理和使用这些图标。

vite-plugin-svg-icons 安装

node version: >=12.0.0

vite version: >=2.0.0

npm i vite-plugin-svg-icons -D
// 或者
yarn add vite-plugin-svg-icons -D
// 或者
pnpm install vite-plugin-svg-icons -D

配置使用vite-plugin-svg-icons

• vite.config.ts 中的配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',

        /**
         * 自定义插入位置
         * @default: body-last
         */
        inject?: 'body-last' | 'body-first'

        /**
         * custom dom id
         * @default: __svg__icons__dom__
         */
        customDomId: '__svg__icons__dom__',
      }),
    ],
  }
}

• 在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register'

到这里 svg 已经引入可以使用

如何在Vue 组件使用

/src/components/SvgIcon.vue

<template>
  <svg aria-hidden="true">
    <use :xlink:href="symbolId" rel="external nofollow"  :fill="color" />
  </svg>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'SvgIcon',
  props: {
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#333',
    },
  },
  setup(props) {
    const symbolId = computed(() => `#${props.prefix}-${props.name}`)
    return { symbolId }
  },
})
</script>

icons 目录结构

# src/icons

- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

/src/App.vue

<template>
  <div>
    <SvgIcon name="icon1"></SvgIcon>
    <SvgIcon name="icon2"></SvgIcon>
    <SvgIcon name="icon3"></SvgIcon>
    <SvgIcon name="dir-icon1"></SvgIcon>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'

import SvgIcon from './components/SvgIcon.vue'
export default defineComponent({
  name: 'App',
  components: { SvgIcon },
})
</script>

优点

• 可扩展性:vite-plugin-svg-icons 提供了灵活的配置选项,允许开发者自定义图标的加载和使用方式。

• 轻量级:vite-plugin-svg-icons 是一个轻量级的插件,没有额外的依赖,可以快速集成到现有的项目中。

• 性能优化:vite-plugin-svg-icons 可以将 SVG 图标转换为内联的 Vue 组件,减少 HTTP 请求,提高页面加载速度。

• 简化开发流程:使用 vite-plugin-svg-icons,开发者可以直接在代码中引用 SVG 图标,无需手动处理 SVG 文件。

• 兼容性:vite-plugin-svg-icons 支持多种类型的 SVG 图标,包括普通的 SVG 文件、Symbol 图标和图标字体等。

到此这篇关于vue3+vite项目中显示SVG图片的实现的文章就介绍到这了,更多相关vue3 显示SVG图片内容请搜索代码部落以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码部落!