当前位置：首页 > news >正文

Vite创建Vue2项目中，封装svg-icon组件并使用——插件之vite-plugin-svg-icons和fast-glob

news 来源：原创 2024/5/3 2:41:04

Vite创建Vue2项目中，封装svg-icon组件并使用——插件之vite-plugin-svg-icons和fast-glob

svg图片在项目中使用的非常广泛，vue2项目中进行引用

vite-plugin-svg-icons：

预加载在项目运行时就生成所有图标,只需操作一次 dom
高性能内置缓存,仅当文件被修改时才会重新生成

1、安装：

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2、配置

1、默认配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
   // 配置localhost
  server: {
		host: '0.0.0.0',
		port: 8080
	},
})

2、配置插件vite-plugin-svg-icons

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
      // 指定路径在你的src里的svg存放文件
      iconDirs: [path.resolve(process.cwd(), 'src/assets')],
      // 指定symbolId格式
      symbolId: '[name]'
    })
  ],
  server: {
		host: '0.0.0.0',
		port: 8080
	},
})

3、main.js中

src/main.js新增

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'virtual:svg-icons-register'  // 新增

createApp(App).mount('#app')

3、封装组件

3.1、封装组件

src\components\svgIcon.vue

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use class="svg-use" :href="symbolId" :color="color"/>
    <title v-if="iconTitle">{{ iconTitle }}</title>
  </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: '',
      },
      className: {
        type: String,
        default: ''
      },
      iconTitle: {
      type: String,
      default: '',
    },
    },
    setup(props) {
      const symbolId = computed(() => `#${props.name}`)
      const svgClass = computed(() => {
        if (props.className) {
          return `svg-icon ${props.className}`
        }
        return 'svg-icon'
      })
      return { symbolId, svgClass }
    }
  })
</script>
<style scope>
  .svg-icon { 
    vertical-align: -0.1em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    fill: currentColor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
  } 
</style>

3.2、页面使用

index.vue

<script setup>
import { ref } from 'vue'

import SvgIcon from "./svgIcon.vue";  // 引用组件

defineProps({
  msg: String
})

const count = ref(0)
</script>

<template>
<!-- 使用组件 -->
 <SvgIcon name="layer" color="red" icon-title="svg图标提示语" class-name="menu-svg-icon"></SvgIcon>
 <div v-if="false">
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
 </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
.menu-svg-icon{
    height:124px;
    width:124px;
    color:blue;
}
</style>

color参数的权重高于class-name参数设置的css样式颜色权重

npm run dev，运行项目时，显示缺少依赖包，报错

在这里插入图片描述

安包，并再次运行项目

npm i fast-glob

显示svg如下

在这里插入图片描述

4.1、按需引入使用

index.vue

<template>
    <svg-icon
      :name="nameVal"
      color="blue"
      class-name="menu-svg-icon"
      :icon-title="iconTitle"
    ></svg-icon>
    <!-- <SvgIcon name="layer" color="red" icon-title="svg图标提示语" class-name="menu-svg-icon"></SvgIcon> -->
</template>
 
<script setup>
import SvgIcon from "@/components/SvgIcon.vue";
    
let iconTitle = ref('svg图片')
// let colorVal = ref('blue')
let nameVal= ref('layer')
</script>

<style scoped>
.menu-svg-icon{
  width: 180px;
  height: 180px;
  color: red !important
}
</style>

4.2、全局引入使用

在main.js中加入

初始版

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import 'virtual:svg-icons-register'  // 插件引入
 

createApp(App).mount('#app') // 挂载组件

src/main.js

import { createApp } from 'vue'
import './style.css'
import svgIcon from './components/svgIcon.vue'  // 引入
import App from './App.vue'
import 'virtual:svg-icons-register'
 

createApp(App).component('SvgIcon', svgIcon).mount('#app') // 挂载组件

页面使用

<template>
    <svg-icon
      :name="nameVal"
      color="blue"
      class-name="menu-svg-icon"
      :icon-title="iconTitle"
    ></svg-icon>
    <!-- <SvgIcon name="layer" color="red" icon-title="svg图标提示语" class-name="menu-svg-icon"></SvgIcon> -->
</template>
 
<script setup>   
  let iconTitle = ref('svg图片')
  // let colorVal = ref('blue')
  let nameVal= ref('layer')
</script>

<style scoped>
.menu-svg-icon{
  width: 180px;
  height: 180px;
  color: red !important
}
</style>