Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/07akioni/xicons

SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons. (Vue3, Vue2, React, SVG)
https://github.com/07akioni/xicons
icons react vue
Last synced: 3 days ago
JSON representation
SVG Vue/React components integrated from fluentui-system-icons, ionicons, ant-design-icons, material-design-icons, Font-Awesome, tabler-icons and carbon icons. (Vue3, Vue2, React, SVG)
Host: GitHub
URL: https://github.com/07akioni/xicons
Owner: 07akioni
Created: 2020-11-01T07:43:51.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2024-12-20T04:03:04.000Z (2 months ago)
Last Synced: 2025-02-09T16:00:46.891Z (10 days ago)
Topics: icons, react, vue
Language: JavaScript
Homepage: https://www.xicons.org/
Size: 694 KB
Stars: 1,332
Watchers: 7
Forks: 57
Open Issues: 50
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project

awesome-naive - xicons - SVG icon integrated component Library. (List / Related To NaiveUI)
README

        # xicons [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

English · [中文](https://github.com/07akioni/xicons/blob/main/README.zh-CN.md)

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

SVG Vue/React components integrated from [`fluentui-system-icons`](https://github.com/microsoft/fluentui-system-icons), [`ionicons`](https://github.com/ionic-team/ionicons), [`ant-design-icons`](https://github.com/ant-design/ant-design-icons), [`material-design-icons`](https://github.com/google/material-design-icons), [`Font-Awesome`](https://github.com/FortAwesome/Font-Awesome), [`tabler-icons`](https://github.com/tabler/tabler-icons) and [`carbon`](https://github.com/carbon-design-system/carbon/tree/main/packages/icons).

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

```bash

# 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.

```bash

npm i -D @ricons/utils  # react

npm i -D @vicons/utils  # vue3

npm i -D @v2icons/utils # vue2

```

## Usage

### For Vue3

[vue3 demo](https://codesandbox.io/s/vicons-demo-sfzk9?file=/src/App.vue)

```html

  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

    }

  }

  

    

  

```

#### Q & A

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

```ts

import type { Component } from 'vue'

function f(iconComponent: Component) {

  // ...

}

```

### For React

[react demo](https://codesandbox.io/s/ricons-demo-05dug?file=/src/App.tsx)

```tsx

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 (

    

      

    

  )

}

```

### For Vue2

[vue2 demo](https://codesandbox.io/s/v2icons-demo-xoeme?file=/src/App.vue)

```html

  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

    }

  }

  

    

  

```

### For SVG

```html



```

## 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:

```tsx

import { Icon } from '@ricons/utils' // react

import { Icon } from '@vicons/utils' // vue3

import { Icon } from '@v2icons/utils' // vue2

// render it

;

  

```

### 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:

```tsx

import { IconConfigProvider, Icon } from '@ricons/utils'  // react

import { IconConfigProvider, Icon } from '@vicons/utils'  // vue3

import { IconConfigProvider, Icon } from '@v2icons/utils' // vue2

// render it

;

  

    

      

    

  

```

## 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:

```js

import Money16Regular from '@ricons/fluent/Money16Regular'

```

## Icon Utils Packages

| package        | version                                                                                                        | description                     |

| -------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------- |

| @ricons/utils  | [![npm version](https://badge.fury.io/js/%40ricons%2Futils.svg)](https://badge.fury.io/js/%40ricons%2Futils)   | Util icon components for react. |

| @vicons/utils  | [![npm version](https://badge.fury.io/js/%40vicons%2Futils.svg)](https://badge.fury.io/js/%40vicons%2Futils)   | Util icon components for vue3.  |

| @v2icons/utils | [![npm version](https://badge.fury.io/js/%40v2icons%2Futils.svg)](https://badge.fury.io/js/%40v2icons%2Futils) | Util icon components for vue2.  |

## Icon Packages

### Vue3

| package           | version                                                                                                              |

| ----------------- | -------------------------------------------------------------------------------------------------------------------- |

| @vicons/fluent    | [![npm version](https://badge.fury.io/js/%40vicons%2Ffluent.svg)](https://badge.fury.io/js/%40vicons%2Ffluent)       |

| @vicons/ionicons4 | [![npm version](https://badge.fury.io/js/%40vicons%2Fionicons4.svg)](https://badge.fury.io/js/%40vicons%2Fionicons4) |

| @vicons/ionicons5 | [![npm version](https://badge.fury.io/js/%40vicons%2Fionicons5.svg)](https://badge.fury.io/js/%40vicons%2Fionicons5) |

| @vicons/antd      | [![npm version](https://badge.fury.io/js/%40vicons%2Fantd.svg)](https://badge.fury.io/js/%40vicons%2Fantd)           |

| @vicons/material  | [![npm version](https://badge.fury.io/js/%40vicons%2Fmaterial.svg)](https://badge.fury.io/js/%40vicons%2Fmaterial)   |

| @vicons/fa        | [![npm version](https://badge.fury.io/js/%40vicons%2Ffa.svg)](https://badge.fury.io/js/%40vicons%2Ffa)               |

| @vicons/tabler    | [![npm version](https://badge.fury.io/js/%40vicons%2Ftabler.svg)](https://badge.fury.io/js/%40vicons%2Ftabler)       |

| @vicons/carbon    | [![npm version](https://badge.fury.io/js/%40vicons%2Fcarbon.svg)](https://badge.fury.io/js/%40vicons%2Fcarbon)       |

### React

| package           | version                                                                                                              |

| ----------------- | -------------------------------------------------------------------------------------------------------------------- |

| @ricons/fluent    | [![npm version](https://badge.fury.io/js/%40ricons%2Ffluent.svg)](https://badge.fury.io/js/%40ricons%2Ffluent)       |

| @ricons/ionicons4 | [![npm version](https://badge.fury.io/js/%40ricons%2Fionicons4.svg)](https://badge.fury.io/js/%40ricons%2Fionicons4) |

| @ricons/ionicons5 | [![npm version](https://badge.fury.io/js/%40ricons%2Fionicons5.svg)](https://badge.fury.io/js/%40ricons%2Fionicons5) |

| @ricons/antd      | [![npm version](https://badge.fury.io/js/%40ricons%2Fantd.svg)](https://badge.fury.io/js/%40ricons%2Fantd)           |

| @ricons/material  | [![npm version](https://badge.fury.io/js/%40ricons%2Fmaterial.svg)](https://badge.fury.io/js/%40ricons%2Fmaterial)   |

| @ricons/fa        | [![npm version](https://badge.fury.io/js/%40ricons%2Ffa.svg)](https://badge.fury.io/js/%40ricons%2Ffa)               |

| @ricons/tabler    | [![npm version](https://badge.fury.io/js/%40ricons%2Ftabler.svg)](https://badge.fury.io/js/%40ricons%2Ftabler)       |

| @ricons/carbon    | [![npm version](https://badge.fury.io/js/%40ricons%2Fcarbon.svg)](https://badge.fury.io/js/%40ricons%2Fcarbon)       |

### Vue2

| package            | version                                                                                                                |

| ------------------ | ---------------------------------------------------------------------------------------------------------------------- |

| @v2icons/fluent    | [![npm version](https://badge.fury.io/js/%40v2icons%2Ffluent.svg)](https://badge.fury.io/js/%40v2icons%2Ffluent)       |

| @v2icons/ionicons4 | [![npm version](https://badge.fury.io/js/%40v2icons%2Fionicons4.svg)](https://badge.fury.io/js/%40v2icons%2Fionicons4) |

| @v2icons/ionicons5 | [![npm version](https://badge.fury.io/js/%40v2icons%2Fionicons5.svg)](https://badge.fury.io/js/%40v2icons%2Fionicons5) |

| @v2icons/antd      | [![npm version](https://badge.fury.io/js/%40v2icons%2Fantd.svg)](https://badge.fury.io/js/%40v2icons%2Fantd)           |

| @v2icons/material  | [![npm version](https://badge.fury.io/js/%40v2icons%2Fmaterial.svg)](https://badge.fury.io/js/%40v2icons%2Fmaterial)   |

| @v2icons/fa        | [![npm version](https://badge.fury.io/js/%40v2icons%2Ffa.svg)](https://badge.fury.io/js/%40v2icons%2Ffa)               |

| @v2icons/tabler    | [![npm version](https://badge.fury.io/js/%40v2icons%2Ftabler.svg)](https://badge.fury.io/js/%40v2icons%2Ftabler)       |

| @v2icons/carbon    | [![npm version](https://badge.fury.io/js/%40v2icons%2Fcarbon.svg)](https://badge.fury.io/js/%40v2icons%2Fcarbon)       |

### SVG

| package           | version                                                                                                              |

| ----------------- | -------------------------------------------------------------------------------------------------------------------- |

| @sicons/fluent    | [![npm version](https://badge.fury.io/js/%40sicons%2Ffluent.svg)](https://badge.fury.io/js/%40sicons%2Ffluent)       |

| @sicons/ionicons4 | [![npm version](https://badge.fury.io/js/%40sicons%2Fionicons4.svg)](https://badge.fury.io/js/%40sicons%2Fionicons4) |

| @sicons/ionicons5 | [![npm version](https://badge.fury.io/js/%40sicons%2Fionicons5.svg)](https://badge.fury.io/js/%40sicons%2Fionicons5) |

| @sicons/antd      | [![npm version](https://badge.fury.io/js/%40sicons%2Fantd.svg)](https://badge.fury.io/js/%40sicons%2Fantd)           |

| @sicons/material  | [![npm version](https://badge.fury.io/js/%40sicons%2Fmaterial.svg)](https://badge.fury.io/js/%40sicons%2Fmaterial)   |

| @sicons/fa        | [![npm version](https://badge.fury.io/js/%40sicons%2Ffa.svg)](https://badge.fury.io/js/%40sicons%2Ffa)               |

| @sicons/tabler    | [![npm version](https://badge.fury.io/js/%40sicons%2Ftabler.svg)](https://badge.fury.io/js/%40sicons%2Ftabler)       |

| @sicons/carbon    | [![npm version](https://badge.fury.io/js/%40sicons%2Fcarbon.svg)](https://badge.fury.io/js/%40sicons%2Fcarbon)       |

## Credit

| Icon Set                                                                      | License                                                                             |

| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |

| [`ant-design-icons`](https://github.com/ant-design/ant-design-icons)          | [MIT](https://opensource.org/licenses/MIT)                                          |

| [`fluentui-system-icons`](https://github.com/microsoft/fluentui-system-icons) | [MIT](https://opensource.org/licenses/MIT)                                          |

| [`Font-Awesome`](https://github.com/FortAwesome/Font-Awesome)                 | [CC BY 4.0 License](https://creativecommons.org/licenses/by/4.0/)                   |

| [`ionicons`](https://github.com/ionic-team/ionicons)                          | [MIT](https://opensource.org/licenses/MIT)                                          |

| [`material-design-icons`](https://github.com/google/material-design-icons)    | [Apache 2](https://github.com/google/material-design-icons/blob/master/LICENSE)     |

| [`tabler-icons`](https://github.com/tabler/tabler-icons)                      | [MIT](https://opensource.org/licenses/MIT)                                          |

| [`carbon`](https://github.com/carbon-design-system/carbon)                    | [Apache 2](https://github.com/carbon-design-system/carbon/tree/main/packages/icons) |