Создаем React-компоненты иконок с помощью Figma API и SVGR. Часть 2.

• figma-svgr-icons-part-1

  2 0 10.0 JavaScript

  Исходники первой части статьи "Создаем React-компоненты иконок с помощью Figma API и SVGR" https://dev.to/sm1t/sozdaiem-react-komponienty-ikonok-s-pomoshchiu-figma-api-i-svgr-chast-1-1j22

• figma-svgr-icons-part-2

  2 0 10.0 JavaScript

  Исходники второй части статьи "Создаем React-компоненты иконок с помощью Figma API и SVGR" https://dev.to/sm1t/sozdaiem-react-komponienty-ikonok-s-pomoshchiu-figma-api-i-svgr-chast-2-2h5c

• Klotho

  klo.dev

  sponsored

  AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)

  

• storybook

  114 76,268 10.0 TypeScript

  Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  

• create-react-app

  224 98,606 6.9 JavaScript

  Set up a modern web app by running one command.

  

• svgo

  11 18,784 8.2 JavaScript

  ⚙️ Node.js tool for optimizing SVG files

  

• svgr

  15 9,309 8.3 TypeScript

  Transform SVGs into React components 🦁

  const { types } = require('@babel/core'); module.exports = { ... template: function svgrCustomTemplate( { imports, interfaces, componentName, props, jsx, exports }, { tpl } ) { // меняем корневой элемент на SvgIcon jsx.openingElement.name.name = 'SvgIcon'; jsx.closingElement.name.name = 'SvgIcon'; // https://github.com/gregberge/svgr/issues/530 // при изменении корневого элемента пропадает спред пропсов // поэтому необходимо добавить спред пропсов самостоятельно jsx.openingElement.attributes.push( types.jSXSpreadAttribute(types.identifier('props')) ); return tpl` ${imports}; import { SvgIcon } from '../SvgIcon'; ${interfaces}; const ${componentName} = (${props}) => ( ${jsx} ); ${exports}; ` } }

Suggest a related project