react-simple-icons

This package provides the Simple Icons 7.19.0 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

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 { Materialdesign } from @icons-pack/react-simple-icons
• azure devOps is exposed as { Azuredevops } from @icons-pack/react-simple-icons

These are some exceptions to this rule:

• 500px is exposed as { FiveHundredPx } from @icons-pack/react-simple-icons
• c++ is exposed as { Cplusplus } from @icons-pack/react-simple-icons
• .Net is exposed as { DotNet } from @icons-pack/react-simple-icons
• D3.js is exposed as { D3DotJs } from @icons-pack/react-simple-icons
• dev.to is exposed as { DevDotTo } from @icons-pack/react-simple-icons
• webcomponents.org is exposed as { WebcomponentsDotOrg } from @icons-pack/react-simple-icons
• X.Org is exposed as { XDotOrg } from @icons-pack/react-simple-icons
• FerrarinDotVDot is exposed as { FerrarinDotVDot } from @icons-pack/react-simple-icons

Demo

Edit codesandbox

Basic example

import { ReactJs } from '@icons-pack/react-simple-icons';

function BasicExample() {
  return <ReactJs 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 { ReactJs } from '@icons-pack/react-simple-icons';

// title default "React"
function ChangeTitle() {
  return <ReactJs title='My title' color='#61DAFB' size={24} />;
}

Use default color

Set color as default to use the default color for each icon

import { ReactJs } from '@icons-pack/react-simple-icons';

function DefaultColorExample() {
  return <ReactJs color="default" size={24} />;
}

Custom styles

import { ReactJs } from '@icons-pack/react-simple-icons';

function CustomStyles() {
  return <ReactJs className='myStyle' />;
}

.myStyle {
  width: 35px;
  height: 35px;
}