vue動態使用svg,封裝為元件使用

0. 需要安裝的庫

1. 在assets檔案下建立icons資料夾

2. 在components資料夾下建立svgicon元件

3. vue.config.js檔案的配置項

4. 使用

基於vue-cli3配置，配置檔案為vue.config.js

"devdependencies"

:

import vue from

'vue'
import svgicon from
'@/components/svgicon'
// svg元件
// 註冊全域性元件
vue.
component
('svg-icon'
, svgicon)
//批量引入svg require.context webpack的api
const req = require.
context
('./svg'
,false
,/\.svg$/
)const
requireall
= requirecontext => requirecontext.
keys()
.map
(requirecontext)
requireall
(req)

"i***ternal"
:style=
"styleexternalicon"
class
="svg-external-icon svg-icon" v-on=
"$listeners"
/>
else
:class
="svgclass" aria-hidden=
"true" v-on=
"$listeners"
>
"iconname"
/>
<
/svg>
<
/template>
export
default
, classname:},
computed:
,iconname()
` }
,svgclass()
else},
styleexternalicon()
) no-repeat 50% 50%`
,'-webkit-mask'
:`url(
$) no-repeat 50% 50%`
}}}, methods:}}
<
/script>
.svg-icon 
.svg-external-icon 
<
/style>

chainwebpack

(config)).
end().
use(
'svgo-loader').
loader
('svgo-loader').
tap(options=>(}
]}))
.end()
;}

class

="message" style=
"font-size: 48px;color: #61dafb"
class
-name=
"card-panel-icon"
/>

svg元件封裝

檔案體積小，能夠被大量的壓縮 可無限放大而不失真 向量圖的基本特徵 在視網膜顯示屏上效果極佳 能夠實現互動和濾鏡效果 1.安裝相應的npm包 yarn add svg sprite loader svgo dev2.src資料夾下新建乙個icons資料夾。裡面存放svg格式的圖示。index.js實...

vue cli3 svg元件封裝

專案當中使用icon應該是很多的，比如說選單的圖示等等，其實方法有很多，我們可以使用字型圖示，我們可以使用png等，但是他們都有弊端，我們一般都會結合阿里圖示庫。png 多了就會是專案變大 雖然沒多大 一種意識性問題 2.1 準備工作 2.1.1 元件目錄結構 icons 資料夾 svg 資料夾 用...

vue 封裝元件

一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...