vue中使用iconfont图标

easy to use iconfont in vue

iconfont 是一个非常方便管理和查找icon的平台, 但在vue中引用svg时稍微有点麻烦，所以简单封装成了该项目

使用组件 one-icon

# vue2
yarn add @veypi/one-icon@1
# vue3
yarn add @veypi/one-icon@2

// main.ts 配置
import OneIcon from '@veypi/one-icon'
// 注意下载下来的js文件放public文件夹里
Vue.use(OneIcon, {href: './icon.js'})
// 或者使用阿里cdn 好处是每次添加icon后不用更新 但是无法离线或内网使用
Vue.use(OneIcon, {href: 'https://at.alicdn.com/t/font*****.js'})

使用中无需带icon-的抬头

<one-icon>IconName</one-icon>
<one-icon>Chip</one-icon>

在vue中原生使用iconfont

引入js

<script type="text/javascript" src=""></script>

引入css

<style type="text/css">.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}
</style>

<link rel="stylesheet" type="text/css" href="">

引用icon

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

参考

官方文档

vue中使用iconfont图标相关推荐

VUE如何引入iconfont图标来使用
对做前端界面的开发者来说,做各类界面的时候需要用到图标,这里说下如何在VUE中引用iconfont图标来使用,以引入阿里的iconfont图标为例. 一.首先访问https://www.iconfon ...
Vue中使用iconfont的精美图标——Symbol图标
使用iconfont的Symbol图标(精美图标) 在项目中引入了iconfont官网下载的图标,其中含有彩色精美图标,然后引-用后却不是彩色的. 经过网上查找方法,看到一篇文章:https://bl ...
在html和vue中使用iconfont的symble色彩图标
在html以及vue中使用iconfont的symbol图标写给新手看的首先注册iconfont,并创建一个项目,在图标库把选择的图标加入项目可以选择使用在线链接,这里推荐下载到本地要注意使用 ...
如何在uni-app中引入iconfont图标
如何在uni-app中引入iconfont图标 step1 在iconfont中找到你要的图标,这里和vue其他地方引用的步骤一致,如果是第一次使用iconfont请自行百度使用方法,因为我一直使用的 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
vue中使用element-ui 图标和阿里字体图标结合使用
vue中使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...
vue中引用tinymce图标不显示解决方法
vue中引用tinymce图标不显示解决方法通过官网查到一篇博客,按照上面步骤可以实现tinymce富文本编辑器的封装和使用. https://www.cnblogs.com/zhongchao66 ...
在vue中修改浏览器图标和名字
在vue中修改浏览器图标和名字 vue中,网页图标默认使用的是vue自带的一个icon的图标,也是vue的logo. 下面整理了几种改变标题和图标的方法 1.修改图标样式 01.使用图片这个方法是可 ...
Vue中使用SVG图标的步骤【钢镚核恒】
Vue中使用SVG图标的步骤简介 svg 可缩放矢量图形(Scalable Vector Graphics) svg 优势:任意缩放,超强显示效果,较小文件,可压缩 svgo 用来压缩svg中无用信 ...
在vue中使用iconfont的项目图标
为了方便开发,同一个图标变换不同的颜色,不需要UI设计师每个颜色切一张图,iconfont的项目设置真的是yyds 1. 登录 iconfont官网 2. 新建项目找到[资源管理]> [我的项 ...

vue中使用iconfont图标

vue中使用iconfont图标

使用组件 one-icon

在vue中原生使用iconfont

参考

vue中使用iconfont图标相关推荐

最新文章

热门文章