Package Exports

@icons-pack/react-simple-icons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@icons-pack/react-simple-icons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-simple-icons

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

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