Vue 引入 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>

i {font-size:0.3rem;
}

6. 注意

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

Vue 引入 icon 图标相关推荐

vue如何引入icon图标并使用
1.进入阿里矢量图标库https://www.iconfont.cn.并登录 2.选择自己需要的图标并加入购物车 3.选完后点击右上角的购物车图标 4.点击"添加至项目"(选择已创 ...
VUE中icon图标与文字不齐
VUE中icon图标与文字不齐最近在使用vant组件引用了某个icon之后发现与文字对不齐,找到了一个最简便的办法就是直接给icon加上属性vertical-align: -10% <van- ...
微信小程序开发引入icon图标出现小框的问题
在练习引入icon图标时无论怎么更改都会出现小框首先检查是否在iconfont.json中的font_family是否写了iconfont "font_family": &quo ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
vue文件如何引入icon图标并使用
1.进入阿里矢量图标库https://www.iconfont.cn.并登录 2.选择自己需要的图标并加入购物车 3.选完后点击右上角的购物车图标 4.点击"添加至项目"(选择已创 ...
vue项目引入icon图标
项目图标的说明当前项目在开发过程中,使用到了iconfont的图标,对应的图标预览地址如下: iconfont Demo 对于开发者来说,一般可以不关心它的存在,因为他并不影响你使用其他的iconf ...
vue引入阿里巴巴图标(含彩色图标)
第一步:下载阿里巴巴图标库的资源到本地. 第二步:在自己的assets创建一个icon文件,然后把下载的东西选择放进去. 第三步:在main.js引入 import './assets/icon/ic ...
Vue组件Icon图标处理方案
Icon图标处理方案记录一次对于想使用element-plus之外的图标,如何封装成一个组件,是本次记录的目标,希望在工作时能帮助自己处理图标问题. 分析,对于element-plus的图标可以通过 ...
vue实现icon图标切换，点击按钮后改变当前按钮样式
前言一个按钮里放了两个icon图标,点击按钮改变icon图标. 本次使用的Heroicons图标库点击前效果图如下: 点击后效果图: 一.引入heroicons图标 import { HomeIc ...

Vue 引入 icon 图标

安装

使用

1. 阿里巴巴矢量图

2. IcoMoon

3. 导入

4. 引入

5. 使用

6. 注意

Vue 引入 icon 图标相关推荐

最新文章

热门文章