介绍

今天给大家安利一个前端开发图标工具包——xicons，这是一组高质量的前端图标包，可以用在Vue（支持Vue2、Vue3）、React框架中，以及你还可以直接下载SVG代码，供各种场景下进行使用。

来源

图标包来源包括：

fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome、tabler-icons以及carbon icons

安装和使用

安装：

直接通过npm进行安装，笔者习惯使用yarn安装，可以根据自己的实际情况安装，也根据实际自己需要的图标：

# react项目
yarn add -D @ricons/fluent
yarn add -D @ricons/ionicons4
yarn add -D @ricons/ionicons5
yarn add -D @ricons/antd
yarn add -D @ricons/material
yarn add -D @ricons/fa # font awesome
yarn add -D @ricons/tabler
yarn add -D @ricons/carbon
# vue3项目
yarn add -D @vicons/fluent
yarn add -D @vicons/ionicons4
yarn add -D @vicons/ionicons5
yarn add -D @vicons/antd
yarn add -D @vicons/material
yarn add -D @vicons/fa # font awesome
yarn add -D @vicons/tabler
yarn add -D @vicons/carbon
# vue2项目
yarn add -D @v2icons/fluent
yarn add -D @v2icons/ionicons4
yarn add -D @v2icons/ionicons5
yarn add -D @v2icons/antd
yarn add -D @v2icons/material
yarn add -D @v2icons/fa # font awesome
yarn add -D @v2icons/tabler
yarn add -D @v2icons/carbon
# SVG
yarn add -D @sicons/fluent
yarn add -D @sicons/ionicons4
yarn add -D @sicons/ionicons5
yarn add -D @sicons/antd
yarn add -D @sicons/material
yarn add -D @sicons/fa # font awesome
yarn add -D @sicons/tabler
yarn add -D @sicons/carbon

我们真正在使用的时候需要安装以下xicon的工具包，以方便我们直接使用图标：

yarn add -D @ricons/utils  # react
yarn add -D @vicons/utils  # vue3
yarn add -D @v2icons/utils # vue2

使用：

本文以Vue3为例，我们选择以antd图标包为例，也就是：

yarn add -D @vicons/antd
yarn add -D @vicons/utils  # vue3

需要什么图标在这搜索即可

大小可以调整、颜色可以调整

名称可以直接在图标列表复制下来，引入即可，效果图如下：

以上仅仅是演示，图标很多，根据自己的需求搜寻即可

其它用法

Vue2:

React:

import { AlertUrgent20Filled } from '@ricons/fluent'
//import AlertUrgent20Filled from '@ricons/fluent/AlertUrgent20Filled'
import { Icon } from '@ricons/utils'

function App() {
  return (
    
      
    
  )
}

SVG:

总结

xicons确实是一组非常不错的图标包，不仅仅图标丰富，而且使用简单，你仅仅按需求安装上对应的图标包，然后仅仅对相应的图标调整大小和颜色，一切都交给xicons。enjoy it！

附上链接：https://www.xicons.org/

希望对你有所帮助！