vue-svgicon基本使用


  在項目開發中,經常會用到svg圖標,之前用的都是vue-svg-icon,最近在npm中搜索svg圖標解析插件,發現vue-svgicon用的相對較多,對比以下,vue-svgicon用法較為靈活,方便,基本使用方法如下:

  1、安裝項目依賴

npm install vue-svgicon -D

  2、在項目目錄中引入svg圖片(任意目錄)

  3、配置svg圖標解析和輸出路徑

    因為vue-svgicon本質會把svg圖標解析成js文件,在項目中是通過import導入生成的js文件來達到對svg圖標的引用,具體可以在package.json中做以下配置:

    

  4、在main.js中引入svgIcon組件,並且全局注冊下

import SvgIcon from 'vue-svgicon'

Vue.use(SvgIcon, {
    tagName: 'svg-icon'
});

  5、執行下npm run svg命令

  可以看到項目中icons下面多了很多js文件

  6、項目中具體使用如下:

<svg-icon name="logo" class="menu-icon" color="#fff" width="16" height="16"></svg-icon>

import '@/icons/logo'

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM