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
TypeScript Support
Usage
You can use simpleicons.org to find a specific icon. Then, you can import the icon from simple-icons and use it with the Icon component:
import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';
function BasicExample() {
return <Icon icon={siReact} color="#61DAFB" size={24} />;
}
Demo
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 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';
// title default "React"
function ChangeTitle() {
return <Icon icon={siReact} title="My title" color="#61DAFB" size={24} />;
}
Custom styles
import siReact from 'simple-icons/icons/react';
import Icon from '@icons-pack/react-simple-icons';
// title default "React"
function CustomStyles() {
return <Icon icon={siReact} className="myStyle" />;
}
.myStyle {
width: 35px;
height: 35px;
}
