xicons

English · 中文

Include vicons(vue3), ricons(react), sicons(svg) & v2icons(vue2).

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon.

Util icon component for customizing color & size is also provided.

Icons Preview & Search

https://www.xicons.org

Changelog

• 0.13.0 Fix vue3 icon memory leaking issue.

Installation

Icons Installation

# Install packages on your demand
# For 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
# For 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
# For 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
# For SVG file
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

Icon Utils Installation

Icon utils provide a icon wrapper component for customizing color & size of the inner SVG icon.

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

Usage

For Vue3

vue3 demo

<script>
  import { Money16Regular } from '@vicons/fluent'
  // or
  import Money16Regular from '@vicons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @vicons/utils

  import { Icon } from '@vicons/utils'

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

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

Q & A

• (Vue3) How to create a function that accepts an icon component as input in TypeScript?

import type { Component } from 'vue'

function f(iconComponent: Component) {
  // ...
}

For React

react demo

import { Money16Regular } from '@ricons/fluent'
// or
import Money16Regular from '@ricons/fluent/Money16Regular'

// You can directly use the SVG component
// or wrap it in an Icon component from @ricons/utils
import { Icon } from '@ricons/utils'

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

For Vue2

vue2 demo

<script>
  import { Money16Regular } from '@v2icons/fluent'
  // or
  import Money16Regular from '@v2icons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @v2icons/utils

  import { Icon } from '@v2icons/utils'

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

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

For SVG

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

Utils API

Icon API

An icon component (in @vicons/utils, @ricons/utils, @v2icons/utils) is provided for customizing color & size of the inner SVG icon.

| prop | type | default | description | | ----- | ------------------ | ------- | ---------------------- | | size | string \| number | - | Size of the icon. | | color | string | - | Color of the icon. | | tag | string | span | Tag to be rendered as. |

For example:

import { Icon } from '@ricons/utils' // react
import { Icon } from '@vicons/utils' // vue3
import { Icon } from '@v2icons/utils' // vue2

// render it
;<Icon color="green" size="48">
  <SomeIcon />
</Icon>

IconConfigProvider API

IconConfigProvider will affect all the descendant Icons' default prop value.

| prop | type | default | description | | ----- | ------------------ | ------- | ---------------------- | | size | string \| number | - | Size of the icon. | | color | string | - | Color of the icon. | | tag | string | span | Tag to be rendered as. |

For example:

import { IconConfigProvider, Icon } from '@ricons/utils'  // react
import { IconConfigProvider, Icon } from '@vicons/utils'  // vue3
import { IconConfigProvider, Icon } from '@v2icons/utils' // vue2

// render it
;<IconConfigProvider color="green" size="48">
  <App>
    <Icon>
      <SomeIcon />
    </Icon>
  <App/>
</IconConfigProvider>

Common Issues

too many open files

This is because the count of opened files exceeds the limit of operation system.

Use ulimit -n to check the limit.

You can only increase the limit or import icons by path:

import Money16Regular from '@ricons/fluent/Money16Regular'

Icon Utils Packages

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

Icon Packages

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 | [![npm version](htt