README.zh-CN.md

xicons

English · 中文

包含 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