這期內(nèi)容當中小編將會給大家?guī)碛嘘P svg-sprite-loader如何在VUE-cli3中使用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設、成都做網(wǎng)站與策劃設計,寧海網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:寧海等地區(qū)。寧海做網(wǎng)站價格咨詢:18980820575

svg-sprite-loader 的插件，用來根據(jù)導入的 svg 文件自動生成 symbol 標簽并插入 html，接下來就可以在模版中方便地使用 svg-sprite 技術了。

使用 svg-sprite 的好處

• 頁面代碼清爽

• 可使用 ID 隨處重復調(diào)用

• 每個 SVG 圖標都可以更改大小顏色

安裝插件

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

webpack 配置,在Vue.config.js加入處理 svg 的 loader：

const path = require('path')
function resolve(dir) {
 return path.join(__dirname, '.', dir)
}
module.exports = {
 chainWebpack: config => {
  config.module.rules.delete("svg"); //重點:刪除默認配置中處理svg,
  //const svgRule = config.module.rule('svg')
  //svgRule.uses.clear()
  config.module
   .rule('svg-sprite-loader')
   .test(/\.svg$/)
   .include
   .add(resolve('src/icons')) //處理svg目錄
   .end()
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
 },
 configureWebpack: () => ({
  // resolve: {
  //  alias: require('./alias.config').webpack
  // }
  // module: {
  //  rules: [{
  //   test: /\.svg$/,
  //   use: [{
  //    loader: "svg-sprite-loader",
  //    options: {
  //     symbolId: 'icon-[name]'
  //    }
  //   }]
  //  }]
  // }
 })
}

這時候發(fā)現(xiàn)還是不行啊， body 中并沒有看到 symbol 標簽。

就是說只有我們自己引入的 svg 文件需要經(jīng)過 svg-sprite-loader，那么就將這些 svg 統(tǒng)一放到一個目錄下，我這里放到了 src/icons

然后要在用到的地方引入需要的svg

import './src/icon/target.svg';

重新啟動項目，終于在 html 中看到了 symbol 標簽！

配置好了，就可以用了。使用方法很簡單，相較于原來插入 svg 圖標的方法（img src 或?qū)?svg 整個寫入 html），用 svg-sprite 更加簡單且清爽：

<svg><use xlink:href="#target" /></svg>

嗯，就這樣短短一行。 xlink:href 中傳入 svg ID 就好了，由于在上面的配置文件中我們直接使用文件名作為 symbol 的 ID，所以這里傳入的 ID 即為你想顯示的圖標的 svg 文件名，記得加上 # 。

自動導入

你會發(fā)現(xiàn)，這里要想插入某個圖標，都得 import ，每用一個都要重復一遍這個流程，太麻煩，那么我們就讓 src/icons/svg/下的 svg 文件都自動導入吧。

webpack 可以幫我們做到：

// requires and returns all modules that match
const requireAll = requireContext => requireContext.keys().map(requireContext);
// import all svg
const req = require.context('./assets/svg', true, /\.svg$/);
requireAll(req);

代碼實例:

首先在main.ts中引入import './icons/index',

icons/index.js,將icons/svg中的所有svg導入并注冊全局組件SvgIcon

//SvgIcon組件代碼

<template>
 <svg :class="svgClass" aria-hidden="true">
  <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: 1em;
 height: 1em;
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}
</style>

接下來就可以使用組建了

上述就是小編為大家分享的 svg-sprite-loader如何在VUE-cli3中使用了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享題目：svg-sprite-loader如何在VUE-cli3中使用-創(chuàng)新互聯(lián)
標題路徑：http://sd-ha.com/article18/jjggp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設、全網(wǎng)營銷推廣、網(wǎng)頁設計公司、App設計、網(wǎng)站內(nèi)鏈、自適應網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)