vue 图片多了换的慢_译文：8个可以美化你web应用的免费Vue图标库-CSDN博客

点击上方的终端研发部，右上角选择“设为星标”

每日早9点半，技术文章准时送上

公众号后台回复“学习”，获取作者独家秘制精品资料

往期文章

记五月的一个Android面试经

接口测试时，数据Mock为何如此重要？

什么样的简历，面试官一看就知道多少水份

从400多k的大小减到了2B，我的APP究竟是怎么优化的？

漫画：解密IP 、TCP和DNS与HTTP 的亲密关系

原文链接：http://dwz.date/XqQ 作者：Matt Maribojoc

前言

图标(当被准确使用的时候)是一个吸引访客注意力的好方式，并且可以给予他们视觉线索。随着VueJS的兴起，特别是Vue3.0版本的发行带来的预期，社群同样也开始开发更多的可以直接被人们在Vue中开发时使用的Vue图标库。

这儿有一份我使用过的(或者想要使用的)8个免费的Vue图标库的列表，这个列表涵盖了从自始至终独立的Vue库到纯粹的图标库的所有内容。仅仅只要确保你不会过度使用它们，因为它们实在是太好用了。

1. Vue-Awesome

每一个人都爱FontAwesome(一套风靡全球的图标字体库——在线图标网站)——在数以千计的高质量的、自定义的图标中，它是最流行的图标库之一。Vue-Awesome为Vue带来FontAwesome，允许你仅仅只是通过一个简单的组件就能访问所有免费的图标。

你甚至可以传入所有选项作为属性以使得你的图标跳动、旋转或者是缩放，因此想要自定义或者甚至是动画图标都是容易操作的。

图片源自网络，仅做配文展示

2. Vue Unicons

可能这是我曾经偶然发现的最被低估的/未被充分使用的图标库之一，VueUnicons有超过1K的免费的SVG图标(可缩放矢量图形图标)，把它添加到你的项目中，并开始使用，操作起来超级简单。

每一个VueUnicon组件运行起来与一个取用一些属性的svg非常相似：

名

宽度和高度

填充色

图标风格(直线/单色)

我个人倾向于寻找极简风格的图标，但是你可以自己找更多种类风格的图标。

图片源自网络，仅做配文展示

3. Vue Material Design

这是一个很棒的库对于在你的Vue项目中使用Google的MaterialDesign Icons(谷歌UI图标)。

不仅是在这个库中有大量文档，而且我认为它超级简单对于打开以及启用这些图标。作为一个单独的文件组件它包含每一个图标，因此你可以为每一个你需要的用例准确输入你需要的东西。

同时自从VueMaterial Design使用SVGs，你需要做的就是改变一些周围的属性以便自定义图标。

图片源自网络，仅做配文展示

包含一个Vue图标库的完整的UI库列表

上面的列表仅仅只是进入一些独立的Vue图标库，但是有很多很好的UI库是你可以在全部的项目中使用的。这里有一些我最喜欢的UI库，有一个整体良好的界面。

1. Vuetify

在这个列表上没有Vuetify是不太可能的事情，作为最流行之一且被维护得很好的Vue组件库，它超级灵活，还对所有的项目都非常功能强大。Vuetify有超过100个组成元件，配有响应式网格系统，并且完全支持事件处理。

在图标方面，Vuetify为MaterialDesign和FontAwesome库提供使用支持。我认为具备同时处理二者的能力使得Vuetify对于寻找一致性界面的开发者来说是一个很好的选择。

伴随着每周的修补补丁和持续的更新，Vuetify可能会在未来的几年里保持最流行的Vue库之一的地位。

2. AT UI

ATUI的创立是用于前端的应用程序。凭借其使用CSS预处理的能力，它几乎适用于所有的程序开发团队。

从个人层面上来讲，我真的很喜欢ATUI默认的简约风格和字体选择，并且我认为它可以很直接很容易的就添加到任何的项目里。它的内置的图标库(Feather)也同样发挥巨大的作用当与其他的库相比较的时候。

3. iView

iView是最流行的UI库之一，因为它的神奇的自定义功能。它为不同的字体、图标大小、元件大小、循环形式选项，以及一个开发者建立好看的前端可能需要的一切提供建立与支持。

它有很多内置的组件和光滑的图标使得开发是一件轻而易举的事。如果你正打算尝试开发一个前端项目，iView是一定要考虑的，但是不要想着自己重塑至关重要的组件。

更多通用图标库

很多时候，你可能有意愿为你独立选择的图标库多做一些工作和实现。然而这可能不会像一个npm安装和运行一样容易，这是一个很好的选择如果有你喜爱的图标集。并且谁知道呢——或许你甚至可能为了它发布自己的Vue集成！

总之，这有一些我的最爱。

1. Icomoon

Icomoon是被一些诸如谷歌和苹果这样的大公司使用的超级流行的图标库。它有大量的免费的和高级选项，对于SVG和图标的字体，你可以混合搭配以此找到你的完美的图标设置。

如果你此时正有意愿做一些额外的工作将它集成到Vue中，Icomoon是毋庸置疑值得查看的。

图片源自网络，仅做配文展示

2. IconMonstr

从个人角度来说，IconMonstr有一些我最喜欢的风格的库——简约的外观似乎对于相当多的apps来说都很完美。并且它们有成百上千的免费的svg、png、psd和eps文件。

如果你只是想要快速的让它在你的项目里实现，它们有一个复制和粘贴嵌入代码。但是我认为让它在你的项目里实现的一个好办法是使用第一部分中的一个Vue图标库，并将从IconMonstr下载的任何内容实现为自定义图标。

图片源自网络，仅做配文展示

建立自己的Vue图标集

如果你想要从不同的来源中挑选你的svg库，这有相当简单的办法将它们在你的项目中实现。例如，在Nuxt中，有一个叫作nuxt-svg-loade的便捷的库，允许你自动将svg文件转换为组件。

甚至仅仅只是在一个普通的Vueapp，vue-svg-loader运行的也非常类似。因此，如果你有额外的创意，想要得到一切，你可以稍微准备一下然后行动。

享受Vue图标库！

Vue图标库是美化你的web应用程序的一个好方法。独立的应用程序为你提供了一个整洁简单的界面，以此可以在你的项目中添加一些最大的图标库。完整的UI库帮助你为你的用户构建一个聚合的应用体验。

不管你用的是什么，确保你是明智地使用图标以此来最大限度的发挥其作用。

希望这篇文章能够对你起到帮助！

2019,我迟来的总结 YYYY-MM-DD 的黑锅，我们不背！ 别再 select * 了，送你 12 个查询技巧！ Google 开源的依赖注入库，比 Spring 更小更快！ 程序员对于35岁的担忧：未来真的没有什么好的前景吗？ 武大学生用python敲出樱花开放 | 附源码

相信自己，没有做不到的，只有想不到的

在这里获得的不仅仅是技术！