八个免费的Vue图标库
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 Design和Font 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图标库的更多相关文章
- 三个Bootstrap免费字体和图标库
前言:Bootstrap 简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单 ,深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快, 组件无数 ...
- VUE 引入阿里图标库
本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...
- vue项目使用阿里巴巴矢量图标库教程
前言:element-ui自带的图标库还是不够全,还是需要需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下. 对于我们来说,首选的当然是阿里icon库 地址:http ...
- 在vue项目中引入阿里图标库小记
使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...
- vue中引入.svg图标,使用iconfont图标库
阿里巴巴的iconfont是一个很好的图标库,海量的素材可以快速满足开发人员日常对图标的诉求,我们采用symbol引用,官方介绍 创建SvgIcon组件 <template> <sv ...
- Vue中如何引入第三方icon库(阿里巴巴矢量图标库)
1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车 ...
- vue 项目中使用阿里巴巴矢量图标库iconfont
原文:https://www.jianshu.com/p/38262f18eee2 1.打开iconfont阿里巴巴官网https://www.iconfont.cn 2.新建项目(这样方便后期维护图 ...
- Vue引用阿里图标库
首先进入官网http://www.iconfont.cn/ 转载:https://blog.csdn.net/qq_34802010/article/details/81451278 选择图标库 在里 ...
随机推荐
- 002_软件安装之_keil4与keil5共存
目的:实现keil4和keil5的共存 1. Keil4 主要用来开发 C51 程序 2. Keil5 也就是 MDK 主要用来开发 ARM 芯片,如 STM32 系列芯片 3. 资料下载地址:链接: ...
- React重置非受控组件state的方法
如果想通过props来重置state的值.有3种方法: 1. 最好的方法:key属性 修改key属性的值,可以使组件卸载后重新加载.所有的状态全部重置. 这种情况可以给key设一个每次渲染都会改变的值 ...
- Neo4j数据进行备份、还原
一.neo4j备份方式 neo4j数据库的备份还原分为两种: offline 和 online. Offline backup - dump Dump a database into a single ...
- java上传超大文件
上周遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中sees ...
- (转)代码审计利器-RIPS实践
一.代码审计工具介绍 代码审计工具可以辅助我们进行白盒测试,大大提高漏洞分析和代码挖掘的效率. 在源代码的静态安全审计中,使用自动化工具辅助人工漏洞挖掘,一款好的代码审计软件,可以显著提高审计工作的效 ...
- 在application-context.xml中配置多个property-placeholder
如下所示,直接写多个<context:property-placeholder>标签是会报错的. <context:property-placeholder location=&qu ...
- Apache日志详解
在渗透测试的工作中,WEB网站的日志是非常重要的,今天总结了一些关于调配Apache日志的一些东西. 0x00 Apache日志文件名称及路径介绍 我们安装好Apache后,Apache的配置文件(h ...
- Python问题:error: Microsoft Visual C++ 9.0 is required
Python问题:error: Microsoft Visual C++ 9.0 is required 原因是缺少编译C的 VCForPython包. 解决办法: 安装VCForPython即可. ...
- OpenGL ES: (3) EGL、EGL绘图的基本步骤、EGLSurface、ANativeWindow
1. EGL概述 EGL 是 OpenGL ES 渲染 API 和本地窗口系统(native platform window system)之间的一个中间接口层,它主要由系统制造商实现. EGL提供如 ...
- LoadRunne遇到的一些问题FAQ(持续更新...)
1.LR11破解完成,添加License失败,报错License security violation Loadrunner11破解成功后,用deletelicense.exe工具把License全删 ...