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