Vue 引入 icon 图标

版权声明：转载请注明出处, 谢谢! https://blog.csdn.net/shenxianhui1995/article/details/81231094

安装

npm install vue-svg-icon --save-dev

使用

1. 阿里巴巴矢量图

• 选择需要的字体修改参数
• 选择SVG下载

2. IcoMoon

• 点击右上角”icoMoon App”
• 点击左上角”Import Icons”
• 选择下载的 svg 文件,点击”打开”按钮
• 页面上会多一个”Untitled Set”选项,下面的小图标就是导入的本地 svg 文件
• 点击选择这些小图标,点击右下角”Generate Font”生成字体
• 鼠标移入到图标的时候,下面会显示”Get Code”,点击查看 (此步骤可省略)
• 点击顶部”Preferences”参数选择按钮,修改 Font Name: elm-icon, 其他选项默认即可
• 每个 icon 的名字也建议修改一下, 方便引用
• 点击右下角”Download”下载并解压
  
  

3. 导入

• 打开

  elm-icon

  文件夹
• 把

  fonts

  文件夹下的所有文件复制到

  src/common/fonts

  文件夹下
• 把

  style.css

  文件改名为

  elm-icon.css

  , 并复制到

  src/common/fonts

  文件夹下, 这里要注意修改里面的路径, 否则会报错呦!!!
  

@font-face {
font-family: 'elm-icon';
src:  url('elm-icon.eot?z8fchd');
src:  url('elm-icon.eot?z8fchd#iefix') format('embedded-opentype'),
url('elm-icon.ttf?z8fchd') format('truetype'),
url('elm-icon.woff?z8fchd') format('woff'),
url('elm-icon.svg?z8fchd#elm-icon') format('svg');
font-weight: normal;
font-style: normal;
}

4. 引入

进入 src/main.js

import './fonts/elm-icon.css'

5. 使用

• html

<i class="elm-icon icon-home"></i>
<i class="elm-icon icon-discover"></i>
<i class="elm-icon icon-order"></i>
<i class="elm-icon icon-profile"></i>

• css

i {
font-size: 0.3rem;
}

6. 注意

颜色可在 elm-icon.css 文件设置, 这里不做详述

阅读更多