在vue中使用svg sprite

這幾天研究了一下在vue中使用svg sprite，有些心得，記錄下來，供以後開發時參考，相信對其它人也有用。

在vue中匯入svg的方法有很多種，比如在img標籤的src屬性中匯入，但是這樣就不能使用class改變svg的顏色。所以一般利用svg的use標籤使用內聯svg的方法匯入。例如下面：

使用這種方法需要注意一點，就是如果你想把路徑寫成變數的形式，下面的寫法是行不通的：

因為vue沒有解析裡面的字串，所以不能生成所需要的路徑，而且，即使能夠解析裡面的字串，也由於沒有加上hash值導致解析不了。

解決方法是使用require生成相對路徑。示例如下：

需要注意的是，使用require的下面寫法是不行的。因為路徑中的#解析不了。

如果svg圖示有很多的話，會發出很多http請求，資源消耗量很大。這個時候最好把svg做成雪碧圖。一般情況下，我們手動把要做成雪碧圖的svg檔案編上id，全部放到乙個svg檔案比如sprite.svg檔案裡面去，然後用如下方式引用就可以了(其中notification是引用的svg的id)：

參考svg-sprite-loader實現載入svg自定義元件和vue-cli3使用 svg-sprite-loader可以看到，可以利用svg-sprite-loader來做svg雪碧圖。但是都需要修改webpack的loader配置。

vue-cli內部是利用webpack-chain外掛程式修改webpack配置的，這是原始碼。外部也只能在vue.config.js裡面利用webpack-chain來修改webpack配置。

具體的使用方法可以參考：webpack-chain文件和webpack-配置-module

但是這裡有乙個坑，就是怎麼按條件修改loader配置，比如在某個資料夾使用一種loader，在其它資料夾使用其它loader。看了半天文件，我最後發現，可以用oneof來實現，其中oneof(name)的name是自定義的，隨便寫語義化的名稱就行。webpack-chain裡面的oneof和webpack配置裡面的oneof是對應的。例項如下：

module.exports = );
}};

還有乙個坑就是end方法的使用，在適當的巢狀中需要加end方法返回上一層，否則後面的語句不會執行。

具體可以參考我寫的yi-svg-sprite外掛程式;

vue.config.js裡面的操作是刪除vue-cli裡面對svg的loader處理，然後加上自己對svg的loader處理：在svg-sprite資料夾裡面使用svg-sprite-loader，在其它資料夾裡面使用file-loader(抄的vue-cli原配置);

main.js裡面的操作是匯入yi-svg-sprite庫，並且把svg-sprite資料夾裡面的svg檔案組裝成乙個svg雪碧圖，id是各自的檔名。

後來我才發現，已經有很多svg-sprite庫了，下面對它們一一評價：

vue-cli-plugin-svg-sprite: 這個svg sprite庫看起來很完美，也是包裝的svg-sprite-loader，但是配置項太多，擔心出現其它問題，而且好像沒有維護了。

在vue中使用svg sprite

在Vue中使用Sass

在vue中使用wowjs

在Vue中使用樣式

在vue中使用svg sprite

在Vue中使用Sass

在vue中使用wowjs

在Vue中使用樣式

相關推薦