@icons-pack/react-simple-icons
v10.1.0
Published
This package provides the Simple Icons packaged as a set of React components.
Downloads
229,376
Maintainers
Readme
react-simple-icons
This package provides the Simple Icons 13.14.1 packaged as a set of React components.
Installation
Install the package in your project directory with:
// 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 to find a specific icon. When importing an icon, keep in mind that the names of the icons are upperCamelCase , for instance:
Material Design
is exposed as{ SiMaterialdesign } from @icons-pack/react-simple-icons
azure devOps
is exposed as{ SiAzuredevops } from @icons-pack/react-simple-icons
Demo
Basic example
import { SiReact } from '@icons-pack/react-simple-icons';
function BasicExample() {
return <SiReact color='#61DAFB' size={24} />;
}
Change title
@icons-pack/react-simple-icons
provides a default title referring to the component name
The
<title>
element provides an accessible, short-text description of any SVG container element or graphics element.
import { SiReact } from '@icons-pack/react-simple-icons';
// title default "React"
function ChangeTitle() {
return <SiReact title='My title' color='#61DAFB' size={24} />;
}
Use default color
Set color as default
to use the default color for each icon
import { SiReact } from '@icons-pack/react-simple-icons';
function DefaultColorExample() {
return <SiReact color='default' size={24} />;
}
Use default color as hex
Append Hex
to the icon name to use the default color as hex string
import { SiReact, SiReactHex } from '@icons-pack/react-simple-icons';
function DefaultColorExample() {
return <SiReact color={SiReactHex} size={24} />;
}
Custom styles
import { SiReact } from '@icons-pack/react-simple-icons';
function CustomStyles() {
return <SiReact className='myStyle' />;
}
.myStyle {
width: 35px;
height: 35px;
}