Vue 项目推荐使用这个图标库 vue-icons-plus

本图标库借鉴了 react-icons ，这里表示非常感谢。

文档地址：https://vue-icons.com

vue-icons-plus 图标数总计 50000+，支持Vue 3/Vue 2.7+，允许您轻松导入并直接在Vue项目中使用它们。

优势

1. 清晰整洁的官方文档；
2. 丰富的图标库，好看的图标；
3. 按需引入，不会额外增加打包体积；
4. 零配置，开箱即用；
5. 内网开发者的福音；
6. 版本不断更新中。

安装 (for standard modern project)

yarn add vue-icons-plus
# or
npm install vue-icons-plus --save

在 Vue 3 中使用

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

在 Vue ^2.7 中使用

<script>
  import { FaBeer } from "vue-icons-plus/fa";
  export default {
    components: {
      FaBeer
    }
  }
</script>

<template>
  <div>
    <FaBeer />
  </div>
</template>

查看文档以获取更多使用示例，以及如何使用其他软件包中的图标。

注：每个 Icon 包在 vue-icons-plus 下都有自己的子文件夹。

例如，要使用 Material Design 中的图标，您的导入将是：

import { IconName } from 'vue-icons-plus/md';

包含的 Icon Library

Icon Library	License	Version	Count
Circum Icons	MPL-2.0 license	v2.0.2-22-gcec1364	288
Font Awesome 5	CC BY 4.0 License	5.15.4-3-gafecf2a	1612
Font Awesome 6	CC BY 4.0 License	6.5.2	2045
Ionicons 4	MIT	7.2.2	1338
Ionicons 5	MIT	5.5.4	1332
Material Design icons	Apache License Version 2.0	4.0.0-98-g9beae745bb	4341
Typicons	CC BY-SA 3.0	v2.1.2	336
Github Octicons icons	MIT	19.8.0	273
Feather	MIT	4.29.1	287
Lucide	ISC	0.303.0	1368
Game Icons	CC BY 3.0	12920d6565588f0512542a3cb0cdfd36a497f910	4040
Weather Icons	SIL OFL 1.1	2.0.12-7-gbb80982	219
Devicons	MIT	1.8.0	192
Ant Design Icons	MIT	@ant-design/icons-svg@4.0.0-207-g655d46e	831
Bootstrap Icons	MIT	v1.11.3-29-g92b6aee	2716
Remix Icon	Apache License Version 2.0	v4.2.0-4-ge252d6e	2860
Flat Color Icons	MIT	v1.0.2-27-g8eccbbb	329
Grommet-Icons	Apache License Version 2.0	v4.12.1-3-gbfb6355	635
Heroicons	MIT	v1.0.6-3-gb6de579	460
Heroicons 2	MIT	v2.1.3-1-g9a17872	888
Simple Icons	CC0 1.0 Universal	4.14.0-2428-ga1df74e	3124
Simple Line Icons	MIT	v2.5.5	189
IcoMoon Free	CC BY 4.0 License	d006795ede82361e1bac1ee76f215cf1dc51e4ca	491
BoxIcons	MIT	9ffa9136e8681886bb7bd2145cd4098717ce1c11	1634
css.gg	MIT	2.1.1-1-gdeea4fa	704
VS Code Icons	CC BY 4.0	0.0.35-41-g05f8886	461
Tabler Icons	MIT	v3.2.0-1-g4ec2a71	5237
Themify Icons	MIT	v0.1.2-2-g9600186	352
Radix Icons	MIT	@radix-ui/react-icons@1.3.0-1-g94b3fcf	318
Phosphor Icons	MIT	v2.0.8-9-gfe23e25	9072
Icons8 Line Awesome	MIT	v1.2.1-10-g78a1012	1544
IconPark	Apache License Version 2.0	1.0.0	2658

您可以通过提交拉取请求或创建问题来添加更多图标。

配置

您可以通过 props 更改图标的大小、颜色等。

<script>
  import { FaBeer } from "vue-icons-plus/fa";
</script>

<template>
  <div>
    <FaBeer size="48" color="#333" />
  </div>
</template>

Props

Key	Default	Notes
color	undefined (inherit)
size	24
className	undefined
style	undefined	Can overwrite size and color

测试

组件已通过单元测试，使用无顾虑。

其他

新增了字节跳动的 IconPark，有推荐的其他图标库可以提 issues，期待大家在 Github 上点个 star 🌟，非常感谢。

文档地址：https://vue-icons.com

GitHub 地址：https://github.com/vue-icons-plus/vue-icons-plus