icons

Free SVG icons for popular brands with react

Aug 22, 2020
Free SVG icons for popular brands with react

react-simple-icons

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

View Demo View Github

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.
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

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

Custom styles

import { ReactJs } from '@icons-pack/react-simple-icons'; // title default "React" function CustomStyles() { return <ReactJs className="myStyle" />; }
.myStyle { width: 35px; height: 35px; }

GitHub

Recommended