Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/icons-pack/react-simple-icons
📦 This package provides the Simple Icons packaged as a set of React components.
https://github.com/icons-pack/react-simple-icons
brands codea components desing icons icons-pack iconset logo react react-simple-icons simple-icons svg svg-files ui ui-components
Last synced: 5 days ago
JSON representation
📦 This package provides the Simple Icons packaged as a set of React components.
- Host: GitHub
- URL: https://github.com/icons-pack/react-simple-icons
- Owner: icons-pack
- License: mit
- Created: 2019-08-03T21:54:26.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-06T22:19:46.000Z (15 days ago)
- Last Synced: 2025-01-07T19:05:33.499Z (14 days ago)
- Topics: brands, codea, components, desing, icons, icons-pack, iconset, logo, react, react-simple-icons, simple-icons, svg, svg-files, ui, ui-components
- Language: TypeScript
- Homepage:
- Size: 13.2 MB
- Stars: 336
- Watchers: 3
- Forks: 18
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# react-simple-icons
This package provides the [Simple Icons 14.2.0](https://github.com/simple-icons/simple-icons/releases/tag/14.2.0)
packaged as a set of [React](https://facebook.github.io/react/) components.
## Installation
Install the package in your project directory with:
```sh
// with yarn
yarn add @icons-pack/react-simple-icons
// with npm
npm add @icons-pack/react-simple-icons
// with pnpm
pnpm add @icons-pack/react-simple-icons
// with bun
bun add @icons-pack/react-simple-icons
```
> TypeScript Support
## Usage
You can use [simpleicons.org](https://simpleicons.org) to find a specific icon. When importing an icon, keep in mind
that the names of the icons are [upperCamelCase](https://github.com/samverschueren/uppercamelcase) , for instance:
- [`Material Design`](https://simpleicons.org/?q=material) is exposed as
`{ SiMaterialdesign } from @icons-pack/react-simple-icons`
- [`azure devOps`](https://simpleicons.org/?q=azure%20devOps) is exposed as
`{ SiAzuredevops } from @icons-pack/react-simple-icons`
## Demo
[Edit codesandbox](https://codesandbox.io/s/interesting-yonath-x7o7g?file=/src/App.js)
## Basic example
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
function BasicExample() {
return ;
}
```
## Change title
`@icons-pack/react-simple-icons` provides a default title referring to the component name
> The `` element provides an accessible, short-text description of any SVG container element or graphics element.
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
// title default "React"
function ChangeTitle() {
return ;
}
```
## Use default color
Set color as `default` to use the default color for each icon
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
function DefaultColorExample() {
return ;
}
```
### Use default color as hex
Append `Hex` to the icon name to use the default color as hex string
```jsx
import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';
function DefaultColorExample() {
return ;
}
```
## Custom styles
```jsx
import { SiReact } from '@icons-pack/react-simple-icons';
function CustomStyles() {
return ;
}
```
```css
.myStyle {
width: 35px;
height: 35px;
}
```