檔案
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...