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

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Onboard AI - ChatGPT with full context of any GitHub repo.
  • WorkOS - The modern API for authentication & user identity.
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • figma-svgr-icons-part-1

    Исходники первой части статьи "Создаем 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

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

  • Onboard AI

    ChatGPT with full context of any GitHub repo. Onboard AI learns any GitHub repo in minutes and lets you chat with it to locate functionality, understand different parts, and generate new code. Use it for free at app.getonboardai.com.

  • storybook

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

  • create-react-app

    Set up a modern web app by running one command.

  • svgo

    ⚙️ Node.js tool for optimizing SVG files

  • svgr

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

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts