Question

是否可以使用存储在React中单独的.svg文件中的内联 SVG ？不得修改 SVG 中的类，并且应更改任何ID，以免发生ID冲突。

我尝试将 svgr 库与 svgr 库的以下webpack配置结合使用：

  const { relative } = require('path');
  const context = __dirname;

  ...

  {
    test: /\.svg$/,
    use: ({resource}) => ({
      loader: '@svgr/webpack',
      options: {
        svgoConfig: {
          plugins: [
            { prefixIds: {
                prefixIds: true,
                prefixClassNames: false,
            }},
            { cleanupIDs: {
                prefix: {
                  toString() {
                    return `_${hash(relative(context, resource))}_`;
                  }
                },
                minify: true
            }}
          ]
        }
      }
    }),
  },

  ...

示例React代码：

import Icon from 'icon.svg'

export default () => <div>
    <Icon />
    <Icon />
</div>

示例icon.svg内容：

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 100 100"
>
  <path
    fill="green"
    class="test_class"
    id="test_id"
    d="M 0 0 C 0 50, 40 20, 100 100 V 0 Z"
  />
</svg>

不幸的是，默认情况下， svgr 没有“同一SVG 的多个实例”的概念。

上面的webpack配置允许从多个文件导入相同的 SVG ，并且每次渲染的 svg 中的id都不相同，因为路径不同，所以附加的哈希也不同

问题在于它不适用于同一组件（Icon）的许多实例，并且会导致多个具有相同ID的dom节点。在上面的示例中，“ test_id”的转换版本将重复两次。

我尝试使用 svg-react-loader 库，但它只能修改顶级svg节点。

编辑：我需要完整的类，因为它们用于从CSS访问svg的某些部分，例如： CSS代码：

.imported_svg .test_class {
  background: red;
}

如何在React中使用内联svg而不冲突ID

0 个答案: