Skip to content

Latest commit

 

History

History
310 lines (239 loc) · 13.5 KB

README.md

File metadata and controls

310 lines (239 loc) · 13.5 KB

xicons License: MIT

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

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 npm version Util icon components for react.
@vicons/utils npm version Util icon components for vue3.
@v2icons/utils npm version Util icon components for vue2.

Icon Packages

Vue3

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

React

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

Vue2

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

SVG

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

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