https://github.com/sui-components/svg-iconset
An Open Sourced SVG iconset based on Open Iconic
https://github.com/sui-components/svg-iconset
site--es-platform team--es-pt-web-platform tier--2 vert--es-platform vert--es-platforms
Last synced: 9 months ago
JSON representation
An Open Sourced SVG iconset based on Open Iconic
- Host: GitHub
- URL: https://github.com/sui-components/svg-iconset
- Owner: SUI-Components
- Created: 2016-10-06T08:09:54.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:53:42.000Z (over 3 years ago)
- Last Synced: 2025-06-01T17:01:42.597Z (about 1 year ago)
- Topics: site--es-platform, team--es-pt-web-platform, tier--2, vert--es-platform, vert--es-platforms
- Language: JavaScript
- Homepage: http://sui-components.github.io/svg-iconset
- Size: 1.43 MB
- Stars: 13
- Watchers: 5
- Forks: 3
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactJS implementation of Open Iconic SVG Icon set
This repository is a SVG file format to ReactJS component builder based on [Open Iconic SVG icon set](https://useiconic.com/icons/).
### Run the development environment
- Clone the repo
- `npm i`
- `npm start`
### Building the current icon set
- Run `npm run build`.
- A ReactJS Component will be available inside `components` folder.
### Adding/Replacing current icon set
- Add/Delete `svg` files inside svg folder
- Run `npm run build`.
- A ReactJS Component will be available inside `components` folder.
### Icon set usage
Each ReactJS SVG component allows the following params:
- **size** : A *number* without units is expected. Default value **32**
- **fillColor** : A *string* in any CSS color format ('red', '#f00', 'rgba(255,0,0,.5)') to set `fill` SVG property.
- **strokeColor** : A *string* in any CSS color format ('red', '#f00', 'rgba(255,0,0,.5)') to set `stroke` SVG property.
- **strokeWidth** : A *number* including decimal values to set `stroke-width` SVG property.
- **svgClass** : A *string* to specify a custom class for layout purposes.
### Installation
- install npm package: `npm i -S @s-ui/react-icons`
- import needed icons:
```
import { Accountlogin, Accountlogout } from '@s-ui/react-icons'
const MyComponent = (props) => {
return (
)
}
```
### Some available icons
- Accountlogin
- Accountlogout
- Actionundo
- Actionredo
- Alignleft
- Aligncenter
- Alignright
- Aperture
- Arrowbottom
[...]
Checkout [demo page](https://sui-components.github.io/svg-iconset/) for full list
### Current set of supported SVG attributes:
- alignment-baseline
- clip-path
- clip-rule
- fill-opacity
- fill-rule
- overline-position
- overline-thickness
- shape-rendering
- strikethrough-position
- strikethrough-thickness
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width