如何優雅的使用icon（svg-icon）

• 介紹：

  前端項目中總是會使用大量的icon圖標，我們也有很多辦法去使用icon圖標，比如在iconfont上下載字體庫，使用圖片等等。但是這些都有一個問題，icon圖標不夠直觀明了，不容易維護。現在給大家介紹一個組件：svg-icon。我這里以Vue TypeScript項目來演示。

• 官網地址：前往

• 使用流程：

  • 首先安裝我們需要安裝 vue-svgicon

    yarn add vue-svgicon
    

  • 創建相關目錄
    1. 我們需要在項目中創建一個文件夾來存儲svg圖標。
    
    icons文件夾來存放資源
    svg目錄用來存放原始的svg資源
    components目錄用來存放轉換過的ts文件
    2. 在package.json文件配置命令將svg文件轉換為ts文件，
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6",
    - 使用
    1. 在main.ts 中引入相關依賴項
    import SvgIcon from 'vue-svgicon'
    2. 引入生成的components文件地址
    import '@/icons/components'
    3. Vue導入模塊並配置相關選項如別名，樣式
    Vue.use(SvgIcon, { tagName: 'svg-icon', defaultWidth: '1em', defaultHeight: '1em' })
  • Vue中使用
    <svg-icon name="password" />

• 總結

  以上基本實現了svg-icon的使用，讓我們的項目更加可維護。