react simple icons

反應簡單

該軟件包提供了簡單的圖標13.18.0包裝，作為一組React組件。

安裝

在項目目錄中安裝包裹：

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

打字稿支持

用法

您可以使用simpleicon.org查找特定圖標。導入圖標時，請記住，例如，圖標的名稱是UpperCamelcase，例如：

• Material Design { SiMaterialdesign } from @icons-pack/react-simple-icons
• azure devOps { SiAzuredevops } from @icons-pack/react-simple-icons

演示

編輯代碼框

基本示例

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

使用默認顏色作為十六進制

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