xicons

包含 vicons（vue3），ricons（react），sicons（svg）和 v2icons(vue2)。

整合自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome tabler-icons 和 carbon 的 SVG Vue/React 组件。

同时 xicons 提供了一些图标工具组件来自定义图标的颜色和尺寸。

图标预览 & 查询

https://www.xicons.org

安装

安装图标组件

# 安装你需要的包 # 适用于 react npm i -D @ricons/fluent npm i -D @ricons/ionicons4 npm i -D @ricons/ionicons5 npm i -D @ricons/antd npm i -D @ricons/material npm i -D @ricons/fa # font awesome npm i -D @ricons/tabler npm i -D @ricons/carbon # 适用于 vue3 npm i -D @vicons/fluent npm i -D @vicons/ionicons4 npm i -D @vicons/ionicons5 npm i -D @vicons/antd npm i -D @vicons/material npm i -D @vicons/fa # font awesome npm i -D @vicons/tabler npm i -D @vicons/carbon # 适用于 vue2 npm i -D @v2icons/fluent npm i -D @v2icons/ionicons4 npm i -D @v2icons/ionicons5 npm i -D @v2icons/antd npm i -D @v2icons/material npm i -D @v2icons/fa # font awesome npm i -D @v2icons/tabler npm i -D @v2icons/carbon

# 使用 SVG npm i -D @sicons/fluent npm i -D @sicons/ionicons4 npm i -D @sicons/ionicons5 npm i -D @sicons/antd npm i -D @sicons/material npm i -D @sicons/fa # font awesome npm i -D @sicons/tabler npm i -D @sicons/carbon

安装图标工具组件

xicons 提供一些 Icon 组件来帮助调整内部 SVG 图标的颜色和尺寸。

npm i -D @ricons/utils  # react
npm i -D @vicons/utils  # vue3
npm i -D @v2icons/utils # vue2

使用方式

使用 Vue3

vue3 例子

<script>
  import { Money16Regular } from '@vicons/fluent'
  // or
  import Money16Regular from '@vicons/fluent/Money16Regular'
// 你可以直接使用渲染为 SVG 的组件
// 或者把它包裹在 @vicons/utils 提供的 Icon 组件中
import { Icon } from '@vicons/utils'
export default {
components: {
Icon,
Money16Regular
}
}
</script>
<template>
<Icon>
<Money16Regular />
</Icon>
</template>

Q & A

(Vue3) 如何在 TypeScript 中创建一个接受图标组件作为输入的函数？

import type { Component } from 'vue'
function f(iconComponent: Component) {
// ...
}

使用 React

react 例子

import { Money16Regular } from '@ricons/fluent'
// or
import Money16Regular from '@ricons/fluent/Money16Regular'
// 你可以直接使用渲染为 SVG 的组件
// 或者把它包裹在 @ricons/utils 提供的 Icon 组件中
import { Icon } from '@ricons/utils'
function App() {
return (
<Icon>
<Money16Regular />
</Icon>
)
}

使用 Vue2

vue2 例子

<script>
  import { Money16Regular } from '@v2icons/fluent'
  // or
  import Money16Regular from '@v2icons/fluent/Money16Regular'
// 你可以直接使用渲染为 SVG 的组件
// 或者把它包裹在 @v2icons/utils 提供的 Icon 组件中
import { Icon } from '@v2icons/utils'
export default {
components: {
Icon,
Money16Regular
}
}
</script>
<template>
<Icon>
<Money16Regular />
</Icon>
</template>

使用 SVG

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

工具组件 API

Icon API

一个（在 @vicons/utils、@ricons/utils、@v2icons/utils 的）Icon 组件，可以调整内部 SVG 组件的颜色和尺寸。

prop	类型	默认值	描述
size	`string \| number`	-	图标的尺寸
color	`string`	-	图标的颜色
tag	`string`	`span`	要渲染为何种 HTML 标签

使用方式：

import { Icon } from '@ricons/utils' // react
import { Icon } from '@vicons/utils' // vue3
import { Icon } from '@v2icons/utils' // vue2
// 渲染节点
;<Icon color="green" size="48">
<SomeIcon />
</Icon>

IconConfigProvider API

IconConfigProvider 会影响所有内部 Icon 组件的 prop 默认值。

prop	类型	默认值	描述
size	`string \| number`	-	图标的尺寸
color	`string`	-	图标的颜色
tag	`string`	`span`	要渲染为何种 HTML 标签

使用方式：

import { IconConfigProvider, Icon } from '@ricons/utils'  // react
import { IconConfigProvider, Icon } from '@vicons/utils'  // vue3
import { IconConfigProvider, Icon } from '@v2icons/utils' // vue2
// 渲染节点
;<IconConfigProvider color="green" size="48">
<App>
<Icon>
<SomeIcon />
</Icon>
<App/>
</IconConfigProvider>

常见问题

`too many open files`

这是由于打包时程序打开的文件超出了系统限制的数量。

使用 ulimit -n 查看这个限制。

你只能增加这个限制或者使用路径单个引入图标：

import Money16Regular from '@ricons/fluent/Money16Regular'

图标工具包

package	version	description
@ricons/utils		Util icon components for react.
@vicons/utils		Util icon components for vue3.
@v2icons/utils		Util icon components for vue2.

图标包

Vue3

package	version
@vicons/fluent
@vicons/ionicons4
@vicons/ionicons5
@vicons/antd
@vicons/material
@vicons/fa
@vicons/tabler
@vicons/carbon

React

package	version
@ricons/fluent
@ricons/ionicons4
@ricons/ionicons5
@ricons/antd
@ricons/material
@ricons/fa
@ricons/tabler
@ricons/carbon

Vue2

package	version
@v2icons/fluent
@v2icons/ionicons4
@v2icons/ionicons5
@v2icons/antd
@v2icons/material
@v2icons/fa
@v2icons/tabler
@v2icons/carbon

SVG

package	version
@sicons/fluent
@sicons/ionicons4
@sicons/ionicons5
@sicons/antd
@sicons/material
@sicons/fa
@sicons/tabler
@sicons/carbon

Credit

Icon Set	License
`ant-design-icons`	MIT
`fluentui-system-icons`	MIT
`Font-Awesome`	CC BY 4.0 License
`ionicons`	MIT
`material-design-icons`	Apache 2
`tabler-icons`	MIT
`carbon`	Apache 2