介绍

今天给大家安利一个前端开发图标工具包——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

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

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

<template>
  <div class="wrap">
    <Icon color="#005A8D" size="88"><CalendarSearch20Filled /> </Icon>
    <Icon color="#5E8B7E" size="64"><AlertUrgent20Filled /> </Icon>
    <Icon color="#0A1D37" size="64"><BookContacts28Filled /> </Icon>
    <Icon color="#FFD8CC" size="60"><BookAdd24Filled /> </Icon>
    <Icon color="#CDF0EA" size="128"><Bluetooth24Regular /> </Icon>
    <Icon color="#39A9CB" size="64"><Bed24Regular /> </Icon>
    <Icon color="#FF616D" size="64"><BarcodeScanner20Filled /> </Icon>
    <Icon color="#FF94CC" size="48"><BatteryCheckmark24Filled /> </Icon>
    <Icon color="#5F939A" size="100"><Balloon16Filled /> </Icon>
    <Icon color="#39A2DB" size="24"><BackpackAdd48Regular /> </Icon>
    <Icon color="#52006A" size="64"><ArrowTrending16Filled /> </Icon>
    <Icon color="#8675A9" size="36"><ArrowSyncCircle24Regular /> </Icon>
    <Icon color="#596E79" size="64"><ArrowSync12Filled /> </Icon>
    <Icon color="#AAAAAA" size="72"><ArrowSortDownLines16Filled /> </Icon>
    <Icon color="#F7DAD9" size="68"><ArrowSyncCircle24Regular /> </Icon>
    <Icon color="#3B6978" size="64"><ArrowSync12Filled /> </Icon>
    <Icon color="#7579E7" size="64"><ArrowSortDownLines16Filled /> </Icon>
    <Icon color="#A3D8F4" size="12"><ArrowLeft16Filled /> </Icon>
    <Icon color="#394867" size="64"><ArrowHookUpRight24Filled /> </Icon>
    <Icon color="#DF7861" size="64"><ArrowGrowth24Regular /> </Icon>
    <Icon color="#98ACF8" size="64"><AlignCenterVertical32Filled /> </Icon>
    <Icon color="#14B1AB" size="64"><ArchiveSettings16Filled /> </Icon>
    <Icon color="#A2D5F2" size="64"><AlertSnooze24Filled /> </Icon>
    <Icon color="#F7C5A8" size="64"><AlignBottom20Regular /> </Icon>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import {
  CalendarSearch20Filled,
  AlertUrgent20Filled,
  AlignBottom20Regular,
  AlertSnooze24Filled,
  AlignCenterVertical32Filled,
  AppsList24Regular,
  ArchiveSettings16Filled,
  Archive48Filled,
  ArrowAutofitHeight24Regular,
  ArrowCounterclockwise20Filled,
  ArrowGrowth24Regular,
  ArrowHookUpRight24Filled,
  ArrowLeft16Filled,
  ArrowSortDownLines16Filled,
  ArrowSync12Filled,
  ArrowSyncCircle24Regular,
  ArrowTrending16Filled,
  BackpackAdd48Regular,
  Balloon16Filled,
  BatteryCheckmark24Filled,
  BarcodeScanner20Filled,
  Bed24Regular,
  Bluetooth24Regular,
  BookAdd24Filled,
  BookContacts28Filled,
} from "@vicons/fluent";

//或者
// import CalendarSearch20Filled from "@vicons/fluent/CalendarSearch20Filled";


import { Icon } from "@vicons/utils";
export default defineComponent({
  name: "VueIcon",
  components: {
    CalendarSearch20Filled,
    AlignBottom20Regular,
    AlertUrgent20Filled,
    AlertSnooze24Filled,
    AlignCenterVertical32Filled,
    AppsList24Regular,
    ArchiveSettings16Filled,
    Archive48Filled,
    ArrowAutofitHeight24Regular,
    ArrowCounterclockwise20Filled,
    ArrowGrowth24Regular,
    ArrowHookUpRight24Filled,
    ArrowLeft16Filled,
    ArrowSortDownLines16Filled,
    ArrowSync12Filled,
    ArrowSyncCircle24Regular,
    ArrowTrending16Filled,
    BackpackAdd48Regular,
    Balloon16Filled,
    BatteryCheckmark24Filled,
    BarcodeScanner20Filled,
    Bed24Regular,
    Bluetooth24Regular,
    BookAdd24Filled,
    BookContacts28Filled,
    Icon,
  },
  setup() {
    return {};
  },
});
</script>

<style scoped>
.wrap {
  width: 400px;
  margin: 300px auto;
}
</style>

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

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

其它用法

Vue2:

<script>
  import { AlignCenterVertical32Filled } from '@v2icons/fluent'
  import { Icon } from '@v2icons/utils'

  export default {
    components: {
      Icon,
      AlignCenterVertical32Filled
    }
  }
</script>

<template>
  <Icon>
    <AlignCenterVertical32Filled />
  </Icon>
</template>

React:

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

function App() {
  return (
    <Icon>
      <AlertUrgent20Filled />
    </Icon>
  )
}

SVG:

<img src="@sicons/fluent/BookContacts28Filled.svg" />

总结

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

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

希望对你有所帮助！