vue專案svg使用

2021-09-25 09:06:34 字數 1837 閱讀 3907

檔案

const path =

require

('path'

)// 傳遞乙個相對路徑,會處理得到乙個相對路徑

function

resolve

(dir)

module.exports =).

end()}

}

此時其實已經可以使用了

//template中

"#icon-qq"

>

<

/use>

<

/svg>

//在script中

import

"@/icons/svg/qq.svg"

;

但是這樣使用有個問題,如果多了,每次使用都要引入的話,失去了這樣做的意義,而且使用時,樣式控制和名稱指定並不方便,為了更優雅的**,可以繼續敲下去。。。

(3)在icons資料夾下建立乙個index.js檔案,並在main.js中使用

//icons/index.js檔案

是require下的用乙個方法,用於指定上下文;引數(指定的上下文,是否有下層檔案,正則匹配字尾名)

const req = require.

context

('./svg'

,false

,/\.svg$/

)req.

keys()

.map

(req)

;//會載入檔案中符合規定的所有檔案,最後展示為如下形式['qq.svg','wb.svg']

檔案import

'icons'

現在已經載入出所有的svg,在元件中使用時,不需要引入也可以根據名稱直接使用,但是,如果想要更方便的修改svg的大小樣式,對svg進行元件封裝

(4)封裝元件,在components資料夾裡建立svgicon.vue檔案

class

="svgclass" aria-hidden=

"true" v-on=

"$listeners"

>

"iconname"

>

<

/use>

<

/svg>

<

/template>

export

default

, classname:},

computed:`;

},svgclass()

else}}

};<

/script>

"less" scoped>

.svg-icon

<

/style>

還需全域性注入元件

//在icons/index.js中引用這個元件

import vue from

'vue'

;import svgicon from

'@/components/svgicon.vue'

;//全域性的引入svgicon元件

vue.

component

('svg-icon'

, svgicon)

(5)在元件中可以直接使用了,可以新增class設定自己需要的樣式

class

="qq"

class

="my-style"

>

<

/svg-icon>

以上就是vue-cli3.0專案中svg使用,沒事就試試吧。。。

在vue專案中優雅的使用Svg

本文主要以 vue cli3 搭建的專案為例,來聊一下如何在專案中更優雅的使用 svg 眾所周知,vue cli3 已經推出很長一段時間了,大家可以感受一下 vue cli3 帶來的零配置體驗。but,也相應帶來了一些弊端,就是如歸需要修改預設的 loader 時,會比較麻煩。好了,上正題,建議看此...

Vue專案中操作svg檔案

vue專案中使用svg 引入依賴 yarn add svg sprite loader d 可選 yarn add svgo svgo loader d 依賴說明 svg sprite loader sprites 會被自動渲染和注入頁面,您只需通過 工作原理是 利用svg的symbol元素,將每個...

Vue 中svg的使用

安裝svg sprite loadercli3以上的版本 在vue.config.js 配置如下 module.exports css 以下才是svg的配置 chainwebpack config 封裝元件 svg icon 本文中的檔案目錄為 src views widget svg icon i...