@icons-pack/react-simple-icons

react-simple-icons

This package provides the Simple Icons 15.16.0 packaged as a set of React components.

Installation

Install the package in your project directory with:

npm i @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

Edit codesandbox

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;
}

Changelog

13.8.0

Minor Changes

• 490a71f Thanks @wootsbot! - Bump simple-icons@15.16.0

Similar packages

Other packages similar to @icons-pack/react-simple-icons

react-icons

react-icons is a popular package that provides a wide range of icons from various icon libraries, including Font Awesome, Material Design, and more. It offers a broader selection of icons compared to @icons-pack/react-simple-icons, which focuses specifically on brand icons.

simple-icons

simple-icons is a package that provides SVG icons for popular brands. It is the underlying library that @icons-pack/react-simple-icons uses to provide its icons, but it is not specifically tailored for React, unlike @icons-pack/react-simple-icons.

fontawesome

Font Awesome is a widely used icon library that offers a vast collection of icons, including brand icons. It provides more comprehensive icon options and additional features like icon animations, but requires more setup compared to the straightforward usage of @icons-pack/react-simple-icons.