vue cli3 svg元件封裝

專案當中使用icon應該是很多的，比如說選單的圖示等等，其實方法有很多，我們可以使用字型圖示，我們可以使用png等，但是他們都有弊端，我們一般都會結合阿里圖示庫。

png 多了就會是專案變大(雖然沒多大)一種意識性問題

2.1 準備工作

2.1.1 元件目錄結構

|-- icons // 資料夾

| – svg // 資料夾用來存放svg檔案

| – index.js

| – svgicon.vue

2.1.2 需要的loader

yarn add svg-sprite-loader -d

2.1.3 vue.config.js

// 刪除其他loader對svg檔案的編譯
config.module.rules.
delete
("svg"
)config.module
.rule
('svg-smart').
test
(/\.svg$/
).include
.add
(resolve
('src/icons'))
.add
(resolve
('src/assets'))
.end()
.use
('svg-sprite-loader').
loader
('svg-sprite-loader').
options
()

2.2 詳解icons資料夾

2.2.1 svg資料夾

這是乙個資料夾專門用來存放專案裡面需要使用的svg檔案，比如a.svgb.svg…

2.2.2 index.js

import vue from
'vue'
import svgicon from
'./svgicon'
// svg元件
// 全域性註冊元件
vue.
component
('svg-icon'
, svgicon)
const req = require.
context
('./svg'
,false
,/\.svg$/
)const
requireall
= requirecontext => requirecontext.
keys()
.map
(requirecontext)
console.
log(
'requireall'
,requireall
(req)
)requireall
(req)

2.2.3 svgicon.vue

就是普通的vue元件，不再解釋。


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

2.2.4 主檔案引入main.js

import

'./icons'

2.2.5 使用demo.vue


icon-class
="agent"
>
svg-icon
>

這種方式在使用的時候80%~90%是沒問題的，那什麼情況下會出現問題呢？首先看vue.config.js裡面的配置，我們實現刪除了關於svg編譯的而配置，然後載入了svg-sprite-loader這個loader，在這個loader裡面我們add了一些受控檔案目錄，所以如果不在這個目錄裡面的svg怎麼辦？肯定會報錯，那我們可以多幾個add，但是我們引用的一些npm包裡面也有用svg的時候編譯還是不會通過，那我們不刪除svg的配置了，不好意思svg元件不管用，好難啊，最粗魯的方式就是不使用這些npm包。。。。。有好的方案在更新，臨時還沒有好的方案。

vue cli3 svg元件封裝

svg元件封裝

svg在vue cli3中的配置

vue cli專案中分頁元件封裝

vue cli3 svg元件封裝

svg元件封裝

svg在vue cli3中的配置

vue cli專案中分頁元件封裝

相關推薦