Vue 使用 vue-svg-icon

安装

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 文件设置, 这里不做详述

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,344评论 2 66
  • 首先说明,我是web前端开发的新手,高手忽喷!。最近开发一个微信商城,要用到很多图标,之前我都是用@×2雪碧图。但...
    Cola丶ZYQ阅读 2,202评论 1 2
  • FontAwesome经历了两年的进化,如今已成为不少工具性应用开发者的首选。但FontAwesome的图标毕竟有...
    witmin阅读 19,630评论 5 86
  • 这并不容易,小时候,每个人都有北大清华梦。也许还会应该烦恼,北大呢还是清华。当然,不久之后,现实就暴露了它残忍的一...
    少年年少阅读 543评论 0 2
  • 在如今信息爆炸的时代,可能大家被这些一碗碗热乎乎的鸡汤灌的晕头转向。几句口号式的短句,几篇杜撰的励志文,都能...
    冷读阅读 461评论 2 1