如何优雅的使用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的使用，让我们的项目更加可维护。