專案中優雅的使用svg

搭建環境獲取圖示

處理svg圖示

ue-cli對svg檔案有預設的url-loader 處理，我們要使用svg 圖示需單獨進行配置

npm install svg-sprite-loader -

d

我們要怎麼使用它呢，首先我們不能覆蓋原有的svg解析loader，我們只需要把icons/svg這個資料夾下的svg檔案解析打包即可，我們在vue.config.js中chainwebpack函式中配置，來看**:

// 內建路徑包

const path =
require
("path");
// 定義resolve方法，獲取絕對路徑
function
resolve
(dir)
module.exports =).
end();
}}

如果我們不清楚cli的預設配置，怕改錯，可通過vue inspect審查webpack內部配置，

上面**中我們使用了webpack的鏈式高階用法來處理loader，首先排除了預設svg的loader對我們icons/目錄下svg檔案的處理，然後新增了乙個規則讓svg-sprite-loader處理我們icons/資料夾下的svg檔案，最後我們設定了icon-加上經過處理的svg檔名作為symbolid，也就是說我們在使用qq.svg時可以直接在use標籤使用#icon-qq，**中我們引入了path這樣乙個內建的包，定義了乙個resolve方法，該方法主要是來獲取檔案絕對路徑的，我們把使用路徑的地方都使用該方法轉為絕對路徑，當然使用相對路徑也是可以的，但是不太安全，平台解析相對路徑有差異性，所以絕對路徑是最安全的.

svg sprites圖示簡單使用

現在我們就可以在你想使用圖示的位置使用了，使用方式如下

在main.js中引入(全域性引入)要使用的圖示檔案

import
"@/icons/svg/qq.svg"
;


"#icon-qq"
>
<
/use>
<
/svg>

你以為這就完了？不，還遠遠不夠，這樣使用乙個圖示就得引入檔案一次也太麻煩了，接著看下文

高階:svg檔案自動引入

知道為什麼在icons/資料夾下還有乙個存放svg檔案的svg/資料夾嗎，就是為了這一步自動化引入準備的，我們在icons/資料夾下新建index.js檔案，兩行**搞定，內容如下:

// icons圖示自動載入
const req = require.
context
("./svg"
,false
,/\.svg$/);
req.
keys()
.map
(req)
;

上面**中我們使用require.context設定了當前目錄下的./svg檔案為上下文，使用正則匹配了它需要檢測的檔名，這樣它就會在當前目錄的svg資料夾下去匹配符合規則的檔名

然後我們使用req.keys拿到所有檔名陣列，再使用map遍歷載入req方法，這樣當該檔案被呼叫時會遍歷載入所有匹配到的檔案，這就很nice了.

看看我們改進後的使用方法：

注釋掉之前的**，在main.js中引入icons/index.js檔案

import
"@/icons/index.js"
;


"#icon-qq"
>
<
/use>
<
/svg>
"#icon-wx"
>
<
/use>
<
/svg>

是不是很方便，你以為結束了？不，我們還可以再簡化，因為每次使用都得svg標籤包著use太麻煩了，寫著也不太雅觀，我們繼續簡化，一定要看起來使用起來都十分優雅.

完美版:svgicon元件

在components/目錄下新建svgicon/index.vue檔案，我們寫乙個svgicon元件，封裝一下再全域性註冊，這樣使用起來就會很方便了！

svg-icon元件**如下：


class
="svgclass" aria-hidden=
"true" v-on=
"$listeners"
>
"iconname"
/>
<
/svg>
<
/template>
export
default
, classname:},
computed:`;
},svgclass()
else}}
};<
/script>
.svg-icon 
<
/style

當然元件內部我們還可以根據自身專案情況進行擴充套件，我這邊寫了基礎的配置

元件寫好了之後我們在icons/index.js中進行全域性註冊，這樣我們只引入這乙個檔案就可以達到自動載入和元件註冊兩個功能

icons/index.js改進如下：

import vue from
"vue"
;import svgicon from
"@/components/svgicon"
;// icons圖示自動載入
const req = require.
context
("./svg"
,false
,/\.svg$/);
req.
keys()
.map
(req)
;// 全域性註冊svg-icon元件
vue.
component
("svg-icon"
, svgicon)
;

最後就是我們的使用了，在main.js檔案引入icons/index.js

import
"@/icons/index.js"
;

再來看看我們使用圖示的方法，元件中：


class
="qq"
class
-name=
"qq-style"
>
<
/svg-icon>
<
/template>

看，我們只用在icon-class中傳入要使用的圖示檔名就可以了，當然class-name還可以傳入乙個類，進行一些簡單的樣式修改，是不是很優雅，你get到了嗎？

專案中優雅的使用svg

在vue專案中優雅的使用Svg

Vue專案中操作svg檔案

優雅的在React專案中使用Redux

專案中優雅的使用svg

在vue專案中優雅的使用Svg

Vue專案中操作svg檔案

優雅的在React專案中使用Redux

相關推薦