1. Vue-awesome

也许大家知道 Font-awesome 之类比较流行的图标库,就像各大组件库都有各自版本一样,它也有Vue的版本

Github地址:https://github.com/Justineo/vue-awesome

里面包括数千个高质量,可自定义的图标,Vue-awesome将Font Awesome带入到Vue中,使开发者可以通过单个组件访问所有的免费图标。

2. Vue Unicons

Github地址: https://github.com/antonreshetov/vue-unicons
该图标库有着超过一千个的免费SVG图标。
而且每一个Vue Unicon 组件都具有以下属性:

  • 名称

  • 宽高

  • 颜色

  • 样式

3. Vue Material Design

Github地址: https://github.com/robcresswell/vue-material-design-icons
这是一个很棒的库,它可以帮助你在Vue项目中使用Material Design 图标

该库不仅有出色的文档,而且用这些图标入门很容易。它的每个图标作为单个文件组件,所以可以准确导入每个Vue项目所需的图标。

而且,该库使用的是SVG图标,所以可以轻松更改来自定义自己喜欢的图标

以上的库都是一些单独的图标库,下面给大家介绍一些不一样的

4. Vuetify

在项目中,有许多可能会用到验证,作为最流行且维护良好的Vue组件库之一,它非常灵活。Vuetify拥有100多个组成元素,带有响应式网格系统,并完全支持事件处理。

官网:https://vuetifyjs.com/

在图标方面,Vuetify使用了Material DesignFont Awesome库。具备这两种功能使Vuetify是为寻求一致UI的开发人员的绝佳选择。
它凭借每周的补丁程序和不断的更新,Vuetify可能仍会是数年来最受欢迎的Vue库之一。

5. AT UI

AT UI专为前端Web应用程序而构建。具备使用CSS预处理程序的能力,它几乎适用于几乎所有开发团队。

AT UI中默认的最小样式和字体选择功能,并且添加到任何项目中都非常直观且容易。与其他库相比,它的内置图标库(Feather)也是一个巨大的特点。

官网:https://at-ui.github.io/at-ui

6. iView

这个我觉得就算我不介绍也有很多人知道,这个库在平时的开发中经常遇到,而且它也内置了许多组件和图标,同时也对不同的字体,图标大小,元素大小有良好的支持

官网 :https://www.iviewui.com/

7. Icomoon

Icomoon是超级流行的图标库,谷歌和苹果等一些主要公司都在使用它。它提供了大量的SVG图标和图标字体,同时也有很多高级的付费选项,可以将其混合搭配以找到理想的图标。

官网地址 :https://icomoon.io/

8. IconMonstr

官网 https://iconmonstr.com/

这个库与上述不同的特点是,它的图标库中不仅有svg格式图标,还有 png,psd和eps格式的图标。

如果想要快速上手该项目,只需要复制粘贴并嵌入代码到项目中。

建立自己的图标库

如果在不同的库中选择SVG图标,可以用其他办法将这些图标聚合在一起。例如,在Nuxt中,有一个库名为 nuxt-svg-loader(地址:https://www.npmjs.com/package/nuxt-svg-loader) 它可以使SVG转为自己的组件。

八个免费的Vue图标库的更多相关文章

  1. 三个Bootstrap免费字体和图标库

    前言:Bootstrap 简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单 ,深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快, 组件无数 ...

  2. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  3. vue项目使用阿里巴巴矢量图标库教程

    前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...

  4. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  5. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

  6. vue中引入.svg图标,使用iconfont图标库

    阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...

  7. Vue中如何引入第三方icon库(阿里巴巴矢量图标库)

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  8. vue 项目中使用阿里巴巴矢量图标库iconfont

    原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...

  9. Vue引用阿里图标库

    首先进入官网http://www.iconfont.cn/ 转载:https://blog.csdn.net/qq_34802010/article/details/81451278 选择图标库 在里 ...

随机推荐

  1. 学到了林海峰,武沛齐讲的Day19 迭代细讲

    在家加1个月学了8day的课  出差6天看了8day的课..说明再忙也是可以挤挤多学习的. 广州出差最后两天没学习.一天做车,一天做公司的事...4天就过去了. 老师讲的包子和鸡蛋需求不好...讲的有 ...

  2. ASCII和Unicode编码的区别

    归纳: 编码 大小 支持语言 ASCII 1个字节 英文 Unicode 2个字节(生僻字4个) 所有语言 UTF-8 1-6个字节,英文字母1个字节,汉字3个字节,生僻字4-6个字节 所有语言 具体 ...

  3. Elasticsearch 监控

    导语 Elasticsearch(文中简称ES)是分布式全文搜索引擎,产品提供高可用.易扩展以及近实时的搜索能力,广泛应用于数据存储.搜索和实时分析.很多服务的可用性对ES重度依赖.因此,保障ES自身 ...

  4. LibreOJ #516. 「LibreOJ β Round #2」DP 一般看规律

    二次联通门 : LibreOJ #516. 「LibreOJ β Round #2」DP 一般看规律 /* LibreOJ #516. 「LibreOJ β Round #2」DP 一般看规律 set ...

  5. 搭建自己的博客(六):添加首页,使用css对界面做美化

    之前优化了一些代码,但是之前进入首页直接进入了博客列表,今天添加了首页,以区分和博客的区别,并且使用css代码美化了之前的一些东西. 1.变化的部分,先上图:(蓝色表示修改,红色表示新增)

  6. [bzoj 4887] [Tjoi2017]可乐

    传送门 Description 加里敦星球的人们特别喜欢喝可乐.因而,他们的敌对星球研发出了一个可乐机器人,并且 放在了加里敦星球的1号城市上.这个可乐机器人有三种行为:停在原地,去下一个相邻的 城市 ...

  7. ELK系列(7) - 测试环境下Logstash异常退出:block in multi_receive_encoded

    问题与分析 在本地测试无误后将ELK部署到了测试环境,结果第二天发现Logstash挂掉了,一开始以为是自动部署之类导致的问题.之后几天时间里Logstash总是会down掉,查看了下日志文件,发现报 ...

  8. pl/sql test Window 参数为date

    好久没写笔记了,感觉颓废了,原因是工作忙,休息时间人也变懒了,好了不说了:今天需要记录一下plsql打开测试窗口测试存储过程时,入参为date格式时报的异常 本以为和sql一样处理就可以,但是报异常, ...

  9. Python 自学笔记(六)

    PK小游戏 1.要有玩家敌人:那就是需要定义两个角色的属性变量 2.相互攻击:需要两个角色都有血量和攻击的变量(也就是四个变量) 3.攻击减少血量:比如玩家血量=敌人攻击力-玩家当前血量 4.最终胜负 ...

  10. LTDC/DMA2D——液晶显示

    1.显示器的基本参数 (1) 像素像素是组成图像的最基本单元要素,显示器的像素指它成像最小的点. (2) 分辨率一些嵌入式设备的显示器常常以“行像素值 x列像素值”表示屏幕的分辨率.如分辨率 800x ...