vue3如何使用svg图片

2022-01-25 13:05:01 阅读：305 来源： 互联网

标签：icons svg loader vue3 import icon SvgIcon 图片

1、下载loader

npm install --save-dev svg-sprite-loader，svgo，svgo-loader

2、在vue.config.js中配置

const path = require('path')
module.exports = {
    lintOnSave:false, //关闭语法检查
    chainWebpack: config => {
        // 给svg规则增加⼀个排除选项
        config.module
          .rule('svg')
          .exclude.add(path.resolve(__dirname, './src/icons/svg'))
    
        // 新增icons规则，设置svg-sprite-loader处理icons⽬录中的svg
        config.module
          .rule('icons')
          .test(/\.svg$/)
          .include.add(path.resolve(__dirname, './src/icons/svg'))
          .end()
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({ symbolId: 'icon-[name]' })
          .end()
          .use('svgo-loader')
          .loader('svgo-loader')
      }
}

2、在src/components下建立SvgIcon/index.vue；
在src下建立icons文件夹，以及index.js文件，svg文件夹下放svg图片
在这里插入图片描述
3、各文件内容如下：

src/components/SvgIcon/index.vue：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  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: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}
</style>

src/icons/index.js:

//vue3中
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)

//vue2中
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件
// 注册为全局组件
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

main.js:

//vue3中
import { createApp } from 'vue'
import App from './App.vue'
// svg组件
import './icons'
import SvgIcon from '@/components/SvgIcon'

const app = createApp(App)
app.component('svg-icon', SvgIcon) //注册svg组件
app.mount('#app')

//vue2中
import './icons'

页面中使用：

<svg-icon icon-class="此处为svg图片的名字"></svg-icon>

标签：icons,svg,loader,vue3,import,icon,SvgIcon,图片
来源： https://blog.csdn.net/weixin_46032200/article/details/122682991

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3如何使用svg图片