vue專案svg使用

檔案

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'

（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)

class

="qq"
class
="my-style"
>
<
/svg-icon>

在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...