This extension includes 54,168 React-Icons snippets for VS Code.
Build apps with 18,056 iconsβacross multiple icon librariesβall at your fingertips.
This extension supports:
- π£ All
react-icons
icons. The complete picture. - π¦
import
snippets, includingall-files
imports, for quick and easy importing. - ποΈ Libraries organized using a prefix, such as
ri:fa
for Font Awesome orri:im
for IcoMoon.
Just type ri
and press Ctrl+Space for autocompletion. VS Code will autocomplete the icon you need.
Use a library prefix to filter by library. For example, ri:fa:book
, ri:im:user
, ri:wi:cloud
, etc.
Read below for more information.
- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
All snippets start with ri
for React-Icons, followed by the icon library prefix.
There are 54,168 snippets available for icons and imports. Read more on each below.
Icons are grouped by library using a prefix. See the table below for the prefix to use:
Library | Prefix | # Icons |
---|---|---|
Ant Design Icons | ai |
788 |
Bootstrap Icons | bs |
668 |
BoxIcons | bi |
738 |
css.gg | cg |
704 |
Devicons | di |
192 |
Feather | fi |
286 |
Flat Color Icons | fc |
329 |
Font Awesome | fa |
1559 |
Game Icons | gi |
3786 |
Github Octicons Icons | go |
184 |
Grommet-Icons | gr |
562 |
Heroicons | hi |
452 |
IcoMoon Free | im |
491 |
Ionicons 4 | io4 |
696 |
Ionicons 5 | io5 |
1300 |
Material Design Icons | md |
959 |
Remix Icon | ri |
2172 |
Simple Icons | si |
1316 |
Typicons | ti |
336 |
VS Code Icons | vsc |
319 |
Weather Icons | wi |
219 |
All react-icons
components are supported.
For example, ri:fa:book
, ri:im:user
, ri:wi:cloud
, etc.
The React Icons website has a searchable directory of all available icons.
Component import snippets are available for all react-icons
components.
All import snippets begin with ri:import
.
For example, ri:import:fa:book
will import FaBook
from Font Awesome via the statement: import { FaBook } from 'react-icons/fa';
.
Import snippets are also available for all-files
, and these snippets all end with :all-files
.
For example, ri:import:fa:book:all-files
will import FaBook
from Font Awesome via the statement: import { FaBook } from '@react-icons/all-files/fa/FaBook';
.
- React-Bootstrap Snippets - Code snippets for React-Bootstrap
- Initial release of React-Icons Snippets.
- Add gifs, update docs.
- Refactor import prefixes. Update docs.
- Update gifs, description, and docs.
- Update docs.
- Extension deprecated and no longer being maintained.