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

Поддержка TypeScript

Использование

Вы можете использовать SimpleIcons.org, чтобы найти определенную иконку. При импорте значка имейте в виду, что имена значков являются верхними камерами, например:

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

Используйте цвет по умолчанию в качестве шестигранного

Добавьте 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 ;
}