天天看點

vue-優雅的使用svg

日前,開發一個配置資料表單類的架構,需要考慮架構的擴充性,以及使用的便捷性,其中圖示類如何便捷的引入也在考慮之中。

期望實作的效果是在新增一個svg時,僅将svg檔案存放到某一個檔案夾下,之後使用時通過類似于<code>&lt;mis-icon icon="name"&gt;</code>這種方式即可使用。

全局注冊元件

使用js讀取檔案夾下的所有svg導入至項目中

在<code>src/compoments</code>下建立<code>MisIcon.vue</code>

在<code>src/assets/svg</code>檔案夾下存放所有svg檔案

注意:如果需要修改svg的顔色,svg檔案中的填充色 <code>fill</code> 必須删除

在<code>src/assets</code> 下建立<code>svg.js</code>檔案

根目錄下的<code>vue.config.js</code>檔案中

<b> ฅ平平庸庸的普通人ฅ </b>