svg的好處

• 矢量性（無論圖片放多大，都不會出現(xiàn)鋸齒狀模糊）
• 利于seo

vue2中使用svg

1.安裝依賴

npm install svg-sprite-loader -D

2.配置vue.config.js

const resolve = dir => path.join(__dirname, dir);// 配置svgconfig.module.rule('svg').exclude.add(resolve('src/assets/sprites')).end();config.module.rule('sprites').test(/\.svg$/).include.add(resolve('src/assets/sprites')).end().use('svg-sprite-loader').loader('svg-sprite-loader').options({symbolId: 'icon-[name]',}).end();

3.在src/components下新建svgIcon組件

<template><svg :class="svgClass" aria-hidden="true" v-bind="$attrs" v-on="$listeners"><use :xlink:href="iconName"/></svg> </template><script> export default {name: 'SvgIcon',props: {iconClass: {type: String,required: true,},className: {type: String,default: '',},},computed: {iconName() {return `#icon-${this.iconClass}`;},svgClass() {if (this.className) {return `svg-icon ${this.className}`;}return 'svg-icon';},}, }; </script><style scoped>.svg-icon {width: 10em;height: 10em;fill: currentColor;overflow: hidden;} </style>

4.在src/plugins下新建 svg-icon.js文件

import Vue from 'vue'; import SvgIcon from '@/components/svgIcon.vue';// svg component// register globally Vue.component('svg-icon', SvgIcon);const req = require.context('../assets/icons/sprites', false, /\.svg$/); const requireAll = requireContext => requireContext.keys().map(requireContext); requireAll(req);

5.在main.js 中引入

import './plugins/svg-icon';

6.下載svg圖片將svg圖片放在assets/sprites/下面

7. 在vue文件中使用svg圖片(可以通過font-size,color來設置svg圖標顏色和大小，設置color時需要將svg文件中的path下面的fill=“#xxx”去除即可)

<svg-icon icon-class="book" class="w-14 h-14 mr-4 text-primary"></svg-icon>

在 vue3 + vite?中使用

1.安裝依賴

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

2.配置插件 vite.config.js / vite.config.ts

import viteSvgIcons from 'vite-plugin-svg-icons'; const { resolve } = require('path')export default defineConfig({plugins: [vue(),viteSvgIcons({// 配置路徑在你的src里的svg存放文件iconDirs: [resolve(process.cwd(), 'src/assets/sprites')],symbolId: 'icon-[dir]-[name]',})] })

3.存放svg文件路徑?/src/assets/sprites

src/assets/sprites

- icon1.svg

- icon2.svg

- icon3.svg

4.SvgIcon組件實現(xiàn)

template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color" /></svg> </template><script lang="ts"> import {computed, defineComponent} from 'vue' export default defineComponent({props: {iconClass: {type: String,required: true,},className: {type: String,default: '',},color: {type: String,default: '#889aa4',},},setup(props) {return {iconName: computed(() => `#icon-${props.iconClass}`),svgClass: computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'}),}}, }) </script><style scope> .svg-icon {width: 1em;height: 1em;fill: currentColor;vertical-align: middle; } </style>

4.在main.js / main.ts 加入否則報錯

import 'vite-plugin-svg-icons/register'; // 需要全局引入再添加 import svgIcon from './components/SvgIcon.vue' // 全局svg圖標組件 app.component('svg-icon', svgIcon)

5.在vue 文件中使用

<template><div><svg-icon icon-class="icon1" /></div> </template><script>import { defineComponent, computed } from 'vue';import SvgIcon from './components/SvgIcon.vue';export default defineComponent({name: 'App',components: { SvgIcon },}); </script>

總結

以上是生活随笔為你收集整理的vue中使用svg矢量图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。