专栏首页前端之巅分享八个免费的Vue图标库,轻松修饰你的应用

分享八个免费的Vue图标库,轻松修饰你的应用

图标,是能够吸引访问者注意力并提供更好的感官的好方法。随着Vue的兴起,更多的Vue库正在兴起,以下就为大家推荐几个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 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项目的6个程序

本文分享自微信公众号 - 一起学前端(xueqianduan),作者:别加香菜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于前端中图片的性能优化方案

    在本地执行 node index.js 后,将会输出一串的<svg>标签,将其直接放入HTML文件中即可。非常的方便

    学前端
  • 在前端中理解MVC服务之 Angular篇(完结)

    本文是该系列中的第三篇,旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。这是通过从使用 JavaScript 作为脚本语言的网页...

    学前端
  • 10个例子,深入了解JavaScript

    作为一门灵活的编程语言,JS中有很多缺陷,这很可能被人们所忽略,而产生很大的失误,在本文中,我们将通过10个容易出错的示例来学习JS语法的一些关键部分,有些甚至...

    学前端
  • Vue和Vue CLI什么关系?

    今天又有同学在学习我的课程的时候,问到Vue和Vue CLI,它们之间的版本号也搞混了。

    甲蛙全栈
  • 域名资讯:多枚区块链域名结拍,区块链概念火热

      近日域名市场结拍了多枚区块链域名,其中包括“区块链服务”blockchainservices.com(20250美金)、“区块链在线”blockchaino...

    躲在树上的域小名
  • 榴莲又售出一枚三声W尾域名hyw.com

    近期3声母和3字母域名交易仍然不断,屡见报道。而以w结尾的3声母域名市场价值也非常高,每次出现,总能让人眼前一亮。今日有消息称:投资人榴莲出售了一...

    躲在树上的域小名
  • 数据结构学习笔记(线性表)

    希希里之海
  • 如何在Ubuntu 14.04上使用Let's Encrypt来保护Nginx

    Let's Encrypt是一个新的证书颁发机构(CA),它提供了一种获取和安装免费TLS / SSL证书的简便方法,从而在Web服务器上启用加密的HTTPS。...

    独钓寒江雪_Ly
  • 美国最严技术出口管制上膛!AI算法芯片机器人量子计算面临封锁

    刚刚,美国商务部工业安全署(Department of Commerce, Bureau of Industry and Security, BIS),出台了一...

    量子位
  • 美国最严技术出口管制上膛!AI算法芯片机器人量子计算面临封锁

    刚刚,美国商务部工业安全署(Department of Commerce, Bureau of Industry and Security, BIS),出台了一...

    量子位

扫码关注云+社区

领取腾讯云代金券