react simple icons

React-Simple-Icons

このパッケージは、一連のReactコンポーネントとしてパッケージ化された単純なアイコン13.18.0を提供します。

インストール

プロジェクトディレクトリにパッケージをインストールします。

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

// with bun
bun add @icons-pack/react-simple-icons

タイプスクリプトサポート

使用法

simpleicons.orgを使用して、特定のアイコンを見つけることができます。アイコンをインポートするときは、アイコンの名前はUppercamelcaseであることに留意してください。

• Material Design { SiMaterialdesign } from @icons-pack/react-simple-iconsとして公開されます
• azure devOps { SiAzuredevops } from @icons-pack/react-simple-iconsとして公開されます

デモ

codeSandboxを編集します

基本的な例

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

function BasicExample ( ) {
  return < SiReact color = '#61DAFB' size = { 24 } /> ;
} 

タイトルを変更します

@icons-pack/react-simple-iconsコンポーネント名を参照するデフォルトのタイトルを提供します

<title>要素は、SVGコンテナ要素またはグラフィック要素のアクセス可能で短期間の説明を提供します。

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

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

デフォルトの色を使用します

defaultとして色を設定して、各アイコンにデフォルト色を使用するように設定します

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

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

デフォルトの色を16進数として使用します

デフォルトの色を16進ストリングとして使用するには、アイコン名にHexを追加します

 import { SiReact , SiReactHex } from '@icons-pack/react-simple-icons' ;

function DefaultColorExample ( ) {
  return < SiReact color = { SiReactHex } size = { 24 } /> ;
} 

カスタムスタイル

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

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

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