vue3.0使用svg

1. 下载插件svg-sprite-loader.

npm install svg-sprite-loader -D

2. 修改配置 vue.config.js文件

const path = require('path')
module.exports = {
	chaiwebpack: config => {
		// 删除原本得配置
		config.module.rule.delete('svg')
		config.module
			.rule('svg')
			.test(/.svg$/)
			.include.add(path.resolve(_dirname, 'src/assets/svg))
			.end()
			.use('svg-sprite-loader')
			.loader('svg-sprite-loader')
			.options({
				symbolId: 'icon-[name]'
			})
	}
}

3. 写一个组件 src/components/base-svg-icon/index.vue

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
/**
 * icon-svg 组件（展示所有的svg）
 */
export default {
  name: 'baseSvgIcon',
  props: {
    iconClass: {type: String},
    className: {type: String}
  },
  setup () {},
  // 可以修改为把computed放在setup中
  computed: {
    iconName () {
      return this.iconClass ? `#icon-${this.iconClass}` : '#icon'
    },
    svgClass () {
      return this.className ? 'svg-icon ' + this.className : 'svg-icon'
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

4. 在main.js中全局引用

const app = createApp(App)
// 加载全部svg
const req = require.context('@/assets/svg', false, /.svg$/)
req.keys().map(req)
// 创建全局组件，以便任何地方使用
app.component('svg-icon', SvgIcon)
// 下面的其他的插件（比如router和store）
	.use(store)
	.use(router)
	.mout('#app')

5. 页面内使用

<template>
	<svg-icon icon-class="layout_fold" claas-name="fold_svg" />
</template>

最后

以上就是傲娇航空为你收集整理的vue3.0使用svg的全部内容，希望文章能够帮你解决vue3.0使用svg所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。