For those developers like me, who are taking a lot of time trying to find good icons for your websites. I have a good news.
XICONS.ORR is the best place to get icons. They have support for framework like Vuejs 2
, ReactJS
, and VueJs 3
.
ICONS INCLUDED IN THE PACKAGE:
- FLUENT ICONS
- Ionicons v4
- Ionicons v5
- Ant Design Icons
- Fontawesome Icons
- Material Icons
- Tabler Icons
- Carbon Icons
What I like about this package is you can install what icons you like, and its easy to integrate on your frameworks you are using.
You can also check instructions in their GITHUB REPO: https://github.com/07akioni/xicons
To install the package:
# 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
We also need the Icon wrapper for our icons.
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
example use for Vue 3:
<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>
example for ReactJS:
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>
)
}
example for Vue 2:
<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>
Top comments (1)
I do prefer icones.js which gracefully plugs in to unplugin-icons for a purely agnostic approach and even more icons! ๐๐ป
But this is also a nice one, thanks! ๐๐ป