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
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
<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
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
<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" />
