Vue-Awesome

Vue-Awesome是Vue.js的SVG图标组件。它建立在Font Awesome下可用的免费图标之上，这是一个流行的图标库。

特点：

包括来自三个图标包的免费字体真棒图标：常规，固体和品牌。使用自定义 CSS 轻松使图标动态缩放。

安装：

npm install vue-awesome

使用示例：

<!-- basic --><v-icon name="beer"/><!-- with options --><v-icon name="sync" scale="2" spin/><v-icon name="comment" flip="horizontal"/><v-icon name="code-branch" label="Forked Repository"/><!-- stacked icons --><v-icon label="No Photos">  <v-icon name="camera"/>  <v-icon name="ban" scale="2" class="alert"/></v-icon>

Unicons是一个开源的，免费使用的Vue.js和React图标库，由IconScout设计（是的，就是我们！）。有数以千计的可自定义图标有四种不同的样式 - 线条、单色、实线和细线。很酷的部分是，它们也可以在IconScout与Adobe XD，Canva，Sketch，Figma等的集成中使用 - 因此您可以在设计和开发阶段使用相同的图标集。

特征：

超过 4，500 个图标，分为 27 个类别，四种不同样式颜色可定制可用于 IconScout 与流行设计工具的集成提供网页字体和 SVG

安装：

i. 使用纱线

yarn add @iconscout/vue-unicons

ii. 使用 npm

npm install --save @iconscout/vue-unicons

使用示例：

<template>  <div>    <uil-vuejs size="180px" class="logo" />  </div></template><script>import { UilVuejs } from '@iconscout/vue-unicons'export default {  components: {    UilVuejs  }}</script>

CoreUI 是一个组件库，可帮助您快速构建管理仪表板，因此您不必从头开始开发这些仪表板。您可以使用现成的小部件来构建功能强大且令人愉悦的仪表板。它带有自己的图标库，提供 1，500 多个免费图标。

特征：

免费图标样式包括线性，实心，品牌和旗帜。提供 SVG、PNG 和 Web 字体。

安装：

i. 使用 npm

// CoreUI Icons librarynpm install @coreui/icons// CIcon componentnpm install @coreui/icons-vue 

二、使用纱线

yarn add @coreui/iconsyarn add @coreui/icons-vue

单个图标的使用示例：

<template>  <CIcon :icon="cilList" size="xl"/>  <CIcon :icon="cilShieldAlt" size="xl"/></template><script>import { CIcon } from '@coreui/icons-vue';import { cilList, cilShieldAlt } from '@coreui/icons';export default {  components: {    CIcon  },  setup() {    return {      cilList,      cilShieldAlt,    }  }}</script>

PrimeVue 是一个组件库，可帮助您构建复杂、现代和动态的 Vue 应用程序。它被数百万开发人员使用，包括财富 500 强公司的开发人员。PrimeVue组件使用PrimeIcons库，该库提供了一个小而高质量的极简主义图标集合。

特征：

可以使用字体大小 CSS 属性更改图标大小。通过指定 pi 旋转类轻松添加旋转动画。

安装：

i. 使用 npm

npm install primeicons --save

使用示例：

i. 导入库

import 'primeicons/primeicons.css';

ii. 显示独立图标

<i class="pi pi-check"></i><i class="pi pi-times"></i>

即使你不是设计师，你可能听说过Material Design，这是一个由谷歌开发的流行设计系统。材料设计的特点是扁平简单，扁平和实用的元素。Vue Material Design Icon Components 库是 Vue 组件的集合，用于渲染 Material Design 图标。

特征：

访问超过 6，700 个材料设计图标使用 CSS 轻松缩放图标

安装：

i. 使用 npm

npm i vue-material-design-icons

二、使用纱线

yarn add vue-material-design-icons

使用示例：

i. 导入图标并将其声明为本地组件

import MenuIcon from 'vue-material-design-icons/Menu.vue';components: {  MenuIcon;}

ii. 在模板代码中使用它

<menu-icon />

正在从事加密货币项目？Vue-cryptoicon 提供 400+ 加密货币图标，您可以免费使用和商业项目。它们有三种样式：白色、黑色和彩色，非常适合深色和浅色网站主题。

特征：

400+ 加密货币和 10+ 法定货币图标，三种风格轻松更改默认大小和颜色

安装：

i. 使用 npm

npm install vue-cryptoicon

二、使用纱线

yarn add vue-cryptoicon

使用示例：

//  main.js import Vue from 'vue';import Cryptoicon from 'vue-cryptoicon';import icons from 'vue-cryptoicon/src/icons';Cryptoicon.add(icons);Vue.use(Cryptoicon);  // App.vue// Bitcoin color icon<cryptoicon symbol="btc" size="24" /> 

如果你是一名web设计师，你不仅可以访问免费和高级图标，还可以找到插图，3D资产和Lottie动画。