在vue中使⽤svg 在vue中使⽤svg
svg的好处
⽮量性（⽆论图⽚放多⼤，都不会出现锯齿状模糊）
利于seo
步骤
1、安装依赖：
npm install svg-sprite-loader --save-dev
2、配置vue-cli
chainWebpack(config) {
// 配置svg
.
rule('svg')
.exclude.add(resolve('src/assets/icons'))
.end()
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/assets/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
}
3、在src/components/svgIcon下新建svg组件
<template>
<svg :class="svgClass" aria-hidden="true" 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
} else {
return'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 10em;
height: 10em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
4、在src下新建icons⽂件夹，及icons⽂件夹下svg⽂件夹、index.js⽂件， index.js⽂件内容如下
import Vue from'vue'
import SvgIcon from'@/components/svg'// svg component
// register globally
Vueponent('svg-icon', SvgIcon)
const req = t('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
5、在main.js中引⼊svg
import './assets/icons/index'
6下载svg图⽚将svg图⽚放在assets/icons/svg/下⾯
7、在页⾯中使⽤（可以通过font-size,color来设置svg图标颜⾊和⼤⼩，设置color时需要将svg⽂件中的path下⾯的fill=“#xxx”去除即
可）
<div class="svg_box">
SVG图标
<svg-icon icon-class="smile"></svg-icon>
<svg-icon icon-class="cry"></svg-icon>
</div>
在Vue3 + vite中使⽤svg
  由于vite的svg⽆法兼容vue2的版本，只能重新如何实现，结果了很久没有⼏个⽂章有⽤的要么打包警告，要么就是⽆法实现直接报错的，终于到了官⽅⽂档是使⽤另⼀个插件实现的
  具体实现
yarn add vite-plugin-svg-icons -D
或者
npm i vite-plugin-svg-icons -D
  配置插件 fig.js / fig.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/icons')],
symbolId: 'icon-[dir]-[name]',
})
]
})
  存放⽂件路劲 /src/assets/icons
src/assets/icons
- icon1.svg
- icon2.svg
-
icon3.svg
- dir/icon1.svg
  然后就在main.js / main.ts 加⼊否则报错
import 'vite-plugin-svg-icons/register';
// 需要全局引⼊再添加
import svgIcon from './components/SvgIcon/index.vue' // 全局svg图标组件
ae能做svg动画吗appponent('svg-icon', svgIcon)
  SvgIcon组件实现
<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>
  使⽤⽅法同Vu2
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。