Make writing a habit together! This is the 8th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details.

I. Problem scenario

These days, it is disgusting to merge project A and project B together, and then we merge project A as the living and PROJECT B as the secondary.

In project B, there were A lot of places where IMG introduced SVG images, while in project A SVG was introduced as A component, resulting in no SVG displayed in that way before. Here is the SVG configuration for Project A:

{ test: /\.svg(\? v=\d+\.\d+\.\d+)? $/, issuer: /\.([jt])sx? $/, use: ['@svgr/webpack'], },Copy the code

Second, problem simulation

We will now set up a project ourselves using create-React-app and then execute NPM run eject to expose our Webpack configuration. We can see the configuration of SVG as follows:

{
  test: /\.svg$/,
  use: [
    {
      loader: require.resolve('@svgr/webpack'),
      options: {
        prettier: false,
        svgo: false,
        svgoConfig: {
          plugins: [{ removeViewBox: false }],
        },
        titleProp: true,
        ref: true,
      },
    },
    {
      loader: require.resolve('file-loader'),
      options: {
        name: 'static/media/[name].[hash].[ext]',
      },
    },
  ],
  issuer: {
    and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
  },
},
Copy the code

We then introduce an SVG image in the component:

import React from 'react';
import LogoUrl from './logo.svg'

const App = () => {
  console.log(1111, LogoUrl)
  console.log(2323, require('./logo.svg'))
  return (
      <div>
        <img src={require('./logo.svg').default} width={40} height={40} alt="" />
        <img src={LogoUrl} alt="" />
      </div>
  )
}
export default App;
Copy the code

If you look at what I’ve printed, there should be no problem up here; And then we modify ourswebpackThe configuration is the same as project A. What happens if you restart and look at the page again? At this time our pictures can not show the ~

We modify it as a component to introduce:

import React from 'react';
import LogoUrl from './logo.svg'

+ import Logo from './logo.svg'

const App = () => {
  console.log(1111, LogoUrl)
  console.log(2323, require('./logo.svg'))
  return (
      <div>
        <img src={require('./logo.svg').default} width={40} height={40} alt="" />
        <img src={LogoUrl} alt="" />
+        <Logo />
      </div>
  )
}
export default App;
Copy the code

Now simulate the problem I had: the way img was introduced in project B does not display ~

Third, solve the problem

SVGR is a generic tool for converting SVG to React components.

What I need now is to use part of the SVG as the URL for the static resource and part as the React component. What the official says is that the easiest way is to use resourceQuery for one of two types.

{ test: /\.svg$/i, type: 'asset', resourceQuery: /url/, // *.svg? url }, { test: /\.svg$/i, issuer: /\.[jt]sx? $/, resourceQuery: { not: [/url/] }, // exclude react component if *.svg? url use: ['@svgr/webpack'], },Copy the code

You might ask what resourceQuery is, you can find it yourself. For example, in the configuration above, we introduced SVG images using ×××.svg? In the url format, the module parameters we import through import meet this requirement, and we can import the display through img.

Modify the code:

import React from 'react'; import LogoUrl from './logo.svg? url' import Logo from './logo.svg' const App = () => { return ( <div> <img src={LogoUrl} alt="" width={40} height={40} /> <Logo width="140" height="140" /> </div> ) } export default App;Copy the code

End, scatter flowers ~