vue3.2 引入svg图像

50 阅读 0 评论 33 点赞

我是靠谱客的博主酷炫萝莉，最近开发中收集的这篇文章主要介绍vue3.2 引入svg图像，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

src/icons/svg-------->你需要的svg图标

src/components------->创建 SvgIcon/index.vue（相当于创建一个组件）

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

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
  icon: {
    type: String,
    required: true
  }
})

const iconName = computed(() => {
  return `#icon-${props.icon}`
})
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

创 src/icons/index.js ------->将svg图标抛出引用（将svg和那个组件抛出）

// 组件
import SvgIcon from '@/components/SvgIcon'

// svg
// 三个参数：引入资源的目录 是否需要便利子目录 匹配文件的规则
const svgRequired = require.context('./svg', false, /.svg$/)
// svgRequired.keys()返回的是路径的数组，forEach遍历每个路径
svgRequired.keys().forEach((item) => svgRequired(item))

// 将组件全局引入
export default (app) => {
  app.component('svg-icon', SvgIcon)
}

main.js引入svg

import SvgIcon from '@/icons'
const app = createApp(App)
SvgIcon(app)

安装loader

npm i --save-dev svg-sprite-loader@6.0.9

修改webpack配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const webpack = require('webpack')
module.exports = {
  chainWebpack(config) {
    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('svg')
      // 忽略
      .exclude.add(resolve('src/icons'))
      // 结束
      .end()
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule('icons')
      // 正则，解析 .svg 格式文件
      .test(/.svg$/)
      // 解析的文件
      .include.add(resolve('src/icons'))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use('svg-sprite-loader')
      // 具体的loader
      .loader('svg-sprite-loader')
      // loader 的配置
      .options({
        symbolId: 'icon-[name]'
      })
      // 结束
      .end()
    config
      .plugin('ignore')
      .use(
        new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn$/)
      )
    config.module
      .rule('icons')
      .test(/.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}