vue3+vue-cli4中怎么使用svg

這篇文章主要介紹“vue3+vue-cli4中怎么使用svg”，在日常操作中，相信很多人在vue3+vue-cli4中怎么使用svg問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue3+vue-cli4中怎么使用svg”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

一、安裝 svg-sprite-loader

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

二、在src/components/svgIcon下新建組件index.vue

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

<script>
import { computed } from "@vue/reactivity";
export default {
  name: "baseSvgIcon",
  props: {
    iconClass: { type: String },
    className: { type: String },
  },
  setup(props) {
    const iconName = computed(() => {
      return props.iconClass ? `#icon-${props.iconClass}` : "#icon";
    });
    const svgClass = computed(() => {
      return props.className ? "svg-icon " + props.className : "svg-icon";
    });
    return { iconName, svgClass };
  },
};
</script>

<style scoped lang="scss">
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

三、在assets在創(chuàng)建icons文件夾

imgs文件夾里含一個svg文件夾，放svg格式文件，以及一個index.js文件，該文件內(nèi)容如下

// 獲取當(dāng)前目錄所有為.svg的文件
const req = require.context('./svg', false, /\.svg$/)

// 解析獲取的.svg文件的文件名稱并返回
const requireAll = (requireContext) =>{
    return requireContext.keys().map(requireContext)
}
requireAll(req)

四、在src同級下創(chuàng)建vue.config.js進行配置

經(jīng)評論區(qū)總結(jié)，如果是在非vue-cli4的項目中，在config.module.rules.delete("svg");報錯的話，可以嘗試使用config.module.rule("svg").exclude.add(resolve("src/assets/imgs")).end();替換該語句

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg"); // 重點：刪除默認(rèn)配置中處理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include
      .add(resolve('src/assets/imgs')) // 處理svg目錄
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },
};

五、在main.js里引入，以及做一些小修改

此處注意，將組件注冊放到main.js里。不然會報[Vue warn]: Failed to resolve component: svg-icon的問題，預(yù)測為父組件先創(chuàng)建完了而子組件還沒創(chuàng)建進去，導(dǎo)致該問題的出現(xiàn)

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/assets/icons'

const app = createApp(App)

import SvgIcon from '@/components/svgIcon' 
app.component('svg-icon', SvgIcon)

app.use(store).use(router).mount('#app')

六、在頁面中使用

<div class="topLeft">
  <svg-icon icon-class="category"></svg-icon>
</div>
<div class="topCenter"></div>
<div class="topRight">
  <svg-icon icon-class="search"></svg-icon>
</div>

七、文件目錄結(jié)構(gòu)及其效果展示

到此，關(guān)于“vue3+vue-cli4中怎么使用svg”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>