Loading SVG with Webpack5

I am trying to migrate our package from Webpack 4 to Webpack 5 but have issue with svg loading.

Previously, we use HtmlWebpackInlineSourcePlugin and raw-loader in our webpack config.

plugins: [
  new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$',
        template: <>,
        filename: <>,
        inject: 'head',
  }),
  new HtmlWebpackInlineSourcePlugin(),
]
...
module: {
      rules: [
        {
          test: /\.(svg)$/,
          loader: 'raw-loader',
        },

Here is the html file:

<button id="button" type="button">
  ${require('../../node_modules/open-iconic<link to svg>').default}
</button>

Expected output:

<button id="button" type="button">
  <svg ...>
   <path/>
  </svg>
</button>

Both of HtmlWebpackInlineSourcePlugin and raw-loader are deprecated in Webpack 5. For HtmlWebpackInlineSourcePlugin, I replaced with InlineChunkHtmlPlugin from react-dev-utils and for raw-loader I tried to follow the asset module guide but it did not work (the import statement is not updated).

plugins: [
  new HtmlWebpackPlugin({
        inlineSource: '.(js|css)$',
        template: <>,
        filename: <>,
        inject: 'head',
  }),
  new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [new RegExp(`<output name>`)]),,
]
...
module: {
      rules: [
        {
          test: /\.(svg)$/,
          type: 'asset/source'
        },

Does anyone know if I miss anything?