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

1. figma-svgr-icons-part-1

   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

   

2. Civic Auth

   www.civic.com featured

   Auth in Less Than 5 Minutes. Civic Auth comes with multiple SSO options, optional embedded wallets, and user management — all implemented with just a few lines of code. Start building today.

   

3. figma-svgr-icons-part-2

   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

   

4. storybook

   3 354 86,563 10.0 TypeScript

   Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

   

5. create-react-app

   4 604 103,217 6.8 JavaScript

   Set up a modern web app by running one command.

   

6. svgo

   5 33 21,582 7.2 JavaScript

   ⚙️ Node.js tool for optimizing SVG files

   

7. svgr

   6 33 10,783 3.5 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