svgr VS raw-loader

svgr

• Nx + NextJS + Docker - The Nx way: Creating the NextJS application
  6 projects | dev.to | 27 Jun 2023

  //@ts-check // eslint-disable-next-line @typescript-eslint/no-var-requires const { composePlugins, withNx } = require('@nx/next'); /** * @type {import('@nx/next/plugins/with-nx').WithNxOptions} **/ const nextConfig = { nx: { // Set this to true if you would like to use SVGR // See: https://github.com/gregberge/svgr svgr: false, }, }; const plugins = [ // Add more Next.js plugins to this list if needed. withNx, ]; module.exports = composePlugins(...plugins)(nextConfig);

• How do I use SVG icons in React?
  2 projects | /r/Frontend | 8 Apr 2023
• One way of building an SVG icon library for your project
  2 projects | /r/javascript | 20 Jan 2023

  Really interesting framework agnostic approach, but I think SVGR is a better option for my React homies. It imports an SVG file as a React component. Shouts also to react-icons if Font Awesome, Material Icons and friends are more your bag.

• Alternative libs to migrate from React to Vue (or Vue to React)
  12 projects | dev.to | 5 Jan 2023

  SVGR

• Power up SVGs with React and CSS
  3 projects | dev.to | 4 Dec 2022

  There is another way to import an SVG in Create React App, though. We can import the SVG as a ReactComponent. This is because CRA leverages SVGR to process SVGs.

• Создаем React-компоненты иконок с помощью Figma API и SVGR. Часть 2.
  6 projects | dev.to | 16 Nov 2022

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

• Using SVGs in Common Lisp web apps with Djula
  8 projects | dev.to | 8 Aug 2022

  To solve these problems and have a better development workflow, I have created a package called cl-djula-svg which automates all the above steps for you. The inspiration for this package came from svgr which exactly does the same thing in React applications. It takes a SVG file, process some override logic, optimize it and create React wrapper components based on the SVG content.

• Some svg icons wont show with react native svg
  3 projects | /r/reactnative | 12 Jun 2022

  I normally use SVGR but every time a designer sends me an svg i’ll pass it in svgOmg that deletes all the unnecessary attributes and propietary code from figma, illustrator &co.

• External SVGs that you can style
  2 projects | dev.to | 11 Apr 2022
• How to debug from this error statement
  4 projects | /r/learnjavascript | 26 Mar 2022

  https://github.com/gregberge/svgr/issues/362 this may help as well.

raw-loader

We haven't tracked posts mentioning raw-loader yet.
Tracking mentions began in Dec 2020.