https://github.com/mrprkr/react-component-icons
SVG icons wrapped as react-components
https://github.com/mrprkr/react-component-icons
Last synced: about 1 month ago
JSON representation
SVG icons wrapped as react-components
- Host: GitHub
- URL: https://github.com/mrprkr/react-component-icons
- Owner: mrprkr
- License: mit
- Created: 2021-01-16T10:31:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-18T09:52:10.000Z (over 4 years ago)
- Last Synced: 2025-02-26T02:36:38.010Z (about 2 months ago)
- Language: TypeScript
- Size: 129 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Component Icons
SVG icons wrapped as react-components for quick implementation and easy styling
Why use component icons?
- Easy vector graphics for common UI icons
- Change the color and size using props
- ES6 module imports (only import what you need and save load time)
- Written in Typescript
- More accessible with alt tags
Advantages over other libraries:
- Import only the icons you need, saving loading times
- Easily color and resize using props
Anti-Pitch:
- Not as comprehensive right now
- Very much work-in-progress
- Mixed browser support for native SVG
Coming soon:
- More icons!
- Adjust stroke weight with prop
- Swap line/fill/outline style with prop
- BYO SVG icons with SvgIcon component
- Improvements to accessibility=
## Usage
Import the icons you need
```js
import { IconSettings } from 'react-component-icons'
```
Add to react components as needed:
```js
```
Optional props:
- `style`: customise the svg style
- `containerStyle`: customise the style of the wrapping container
- `alt`: Provide your own alt-tag for the icon
## Icons
All icons are 24x24px by default and are optically scaled
Categories:
- UI [work in progress]
- Nature [coming soon]
- People [coming soon]
- Science [coming soon]
- Social [coming soon]
- Buildings [coming soon]
- Misc [coming soon]
Components:
- AddIcon
- ChevronDownIcon
- ChevronRightIcon
- ComareIcon
- CrossIcon
- FilterIcon
- SettingsIcon
- SortIcon
- ExampleIcon (Used for example)
- Many more coming soon...