0

My goal is to change svgo module's config the way that it does not remove id tags from svg file while importing it.

I have App.js:

import React from 'react'; import logo from './logo.svg'; import './App.css'; import { ReactComponent as Complex} from './simple.svg';

function App() { return ( ); }

export default App;

This is the svg related block inside my webpack.config.js:

...........................

{ test: /\.(js|mjs|jsx|ts|tsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { customize: require.resolve( 'babel-preset-react-app/webpack-overrides' ), presets: [ [ require.resolve('babel-preset-react-app'), { runtime: hasJsxRuntime ? 'automatic' : 'classic', }, ], ], // @remove-on-eject-begin babelrc: false, configFile: false, // Make sure we have a unique cache identifier, erring on the // side of caution. // We remove this when the user ejects because the default // is sane and uses Babel options. Instead of options, we use // the react-scripts and babel-preset-react-app versions. cacheIdentifier: getCacheIdentifier( isEnvProduction ? 'production' : isEnvDevelopment && 'development', [ 'babel-plugin-named-asset-import', 'babel-preset-react-app', 'react-dev-utils', 'react-scripts', ] ), // @remove-on-eject-end plugins: [ isEnvDevelopment && shouldUseReactRefresh && require.resolve('react-refresh/babel'), ].filter(Boolean), // This is a feature ofbabel-loaderfor webpack (not Babel itself). // It enables caching results in ./node_modules/.cache/babel-loader/ // directory for faster rebuilds. cacheDirectory: true, // See #6846 for context on why cacheCompression is disabled cacheCompression: false, compact: isEnvProduction, }, }, ...............................

Improve this question
7
  • Stay out of node_modules, that's not where your work goes. Also, note that svgo is doing the right thing here: if you're importing SVG files, their id attributes don't matter if you're using them as img source, and their internal id values are incompatible with the document you're putting them in if you're inlining them directly as HTML5. Instead ask yourself why you need those id attributes, because React can already get to whatever you render out in the normal, React way. Commented Mar 3, 2023 at 1:11
  • Hey Mike! I am not using img tag to get id. I need id to change dymanically element parameters. Like doing domument.querySelector to change spesific element (by id) fill color value. So i need that id when i target element with queryselector. If you know a better way, react way, please share it... Commented Mar 4, 2023 at 14:25
  • No, you don't? The component you're putting the SVG in can always get to that SVG directly by using a ref. Even if you can't put the ref on the SVG element itself, you can put it on the wrapping element, so you can always get to its SVG child element for non-react DOM operations. But of course the followup there is "why do you need to perform DOM updates in a React application?" Commented Mar 4, 2023 at 16:52
  • After all, my goal is to present engineering schematics from svgs. For example, in svgs there might be some kind of meters and i need to change the color of the meter to smth dynamically (changing value from db). There are better ways to do this but plz telll me one you d prefer. Commented Mar 4, 2023 at 22:46
  • To sum up I am going to present client made svgs inside an app which grabs for ex fill color data from db. Ofc ill map db data correctly but this is my goal Commented Mar 4, 2023 at 22:49
Related questions
812
How to specify a port to run a create-react-app based project?
432
Template not provided using create-react-app
0
Node 18.7.0 Can only have one resource source when compiling with nuxt
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.