不同的 SVG 图标呈现相同的效果？

Posted 2023-03-28

【中文标题】不同的 SVG 图标呈现相同的效果？

【英文标题】：Different SVG Icons rendering the same?

【发布时间】：2018-10-14 21:59:23

【问题描述】：

我在我的 react 应用程序中使用“react-svg-loader”导入了两个 SVG 图标

图标作为具有自己路径的组件导入，但输出与代码中第一个图标的输出相同。

为什么会发生这种情况，我该如何解决？

这是我的代码：

import React,  Component  from 'react';

import Navigation from '../Navigation/index.js';
import MainLogo from '../MainLogo/index.js';
import Search from '../Search/index.js';
import './index.css'; // styles from

import Logo from '../../assets/svg/logos/Voo_Main.svg';
import SearchIcon from '../../assets/svg/icons/search.svg';

export default class Header extends Component 

  render() 
    const  navItems  = this.props;

    return (
      <header className="header">

        <SearchIcon />
        <Logo />
      </header>
    );
  
;

这是输出：

这是我的 webpack 配置中的加载器：

// react-svg-loader
// https://www.npmjs.com/package/react-svg-loader

    test: /\.svg$/,
    use: [
             
                 loader: "babel-loader",
             ,
             
                 loader: "react-svg-loader",
                 options: 
                     jsx: true, // true outputs JSX tags
                 ,
             ,
         ],
,

这是来自 DOM 的 SVG 图标的代码：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 24 24">
  <defs>
    <path id="a" d="M14.5 16A6.508 6.508 0 0 1 8 9.5C8 5.916 10.916 3 14.5 3S21 5.916 21 9.5 18.084 16 14.5 16m0-15C9.813 1 6 4.813 6 9.5c0 1.983.688 3.807 1.832 5.254l-6.539 6.539a.999.999 0 1 0 1.414 1.414l6.539-6.539A8.443 8.443 0 0 0 14.5 18c4.687 0 8.5-3.813 8.5-8.5C23 4.813 19.187 1 14.5 1"></path>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="b" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
    </mask>
    <use fill="#D3D3D3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
    <g fill="#121A28" mask="url(#b)">
      <path d="M0 24h24V0H0z"></path>
    </g>
  </g>
</svg>

第二个图标：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 120 50">
  <defs>
    <path id="a" d="M95.448 0c-6.967 0-13.25 2.905-17.717 7.567C73.262 2.905 66.979 0 60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81 2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0 13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91 17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969 0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718 7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008 0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327 1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1 1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337 9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0 0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903 10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018 0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"></path>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <mask id="b" fill="#fff">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
    </mask>
    <use fill="#FEFEFE" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#a"></use>
    <g fill="#D4107A" mask="url(#b)">
      <path d="M0 0h120v50H0z"></path>
    </g>
  </g>
</svg>

【问题讨论】：

看起来引用了相同的 ID。要进行测试，请检查呈现页面的 DOM。如果图标的元素具有相同引用的<use xlink:href="#..." /> 形式，则作为加载程序插件的一部分的SVGO 可能已经对它们进行了破坏。尝试设置选项cleanupIDs: false。

@ccprog 谢谢你，我已将 cleanupID 添加到 svg-loader 的 webpack 配置选项中，但无济于事。我还添加了 SVG 图标的 DOM 输出。图标确实具有与“#a”相同的 ID，因此输出相同。

我冒昧地重新格式化。就像我想的那样：<use xlink:href="#a"> 用于两个图标。这些 ID 与原始文件中使用的 ID 相同吗？在我看来，它仍然像 SVGO 使用的重命名约定。

我在另一个项目中使用了相同的插件 react-svg-loader ，我之前没有遇到过这个问题。这里唯一的区别是我从 Zeplin 下载 SVG 作为资产，而不是由设计师提供。我将检查 SVG 图标的代码。

@ccprog 发现罪魁祸首是 Zeplin 添加了这些标签，因为当我从 Illustrator 手动导出图标时，问题并没有持续存在。感谢您的帮助

【参考方案1】：

如果您将 SVG 转换为 .jsx 文件并修改属性以使其对 .jsx 友好，它将像 .svg 文件一样呈现 SVG。

import * as React from 'react';

const svg = (
    <div>
        <svg 
             
             
            viewBox="0 0 120 50"
        >
            <defs>
                <path 
                    id="a" 
                    d="M95.448 0c-6.967 0-13.25 
                    2.905-17.717 7.567C73.262 2.905 66.979 0 
                    60.01 0c-6.974 0-13.263 2.912-17.73 7.578C37.81 
                    2.912 31.523 0 24.548 0 10.992 0 0 10.989 0 24.546c0 
                    13.557 10.992 24.548 24.548 24.548 6.975 0 13.263-2.91 
                    17.732-7.579 4.467 4.668 10.756 7.579 17.73 7.579 6.969 
                    0 13.252-2.908 17.72-7.568 4.469 4.66 10.751 7.568 17.718 
                    7.568 13.56 0 24.552-10.99 24.552-24.548C120 10.989 109.008 
                    0 95.448 0M37.533 19.734l-9.664 14.84a3.968 3.968 0 0 1-3.327 
                    1.8 3.967 3.967 0 0 1-3.33-1.8l-9.661-14.84a3.937 3.937 0 0 1 
                    1.17-5.462 3.971 3.971 0 0 1 5.484 1.167l6.337 
                    9.728 6.332-9.728a3.974 3.974 0 0 1 5.485-1.167 3.94 3.94 0 
                    0 1 1.174 5.462m22.465 15.7c-6.018 0-10.898-4.878-10.898-10.898 
                    0-6.018 4.88-10.899 10.898-10.899 6.021 0 10.903 4.88 10.903 
                    10.9 0 6.02-4.88 10.897-10.903 10.897m35.438 0c-6.018 
                    0-10.898-4.878-10.898-10.898 0-6.018 4.88-10.899 10.898-10.899 
                    6.021 0 10.902 4.88 10.902 10.9 0 6.02-4.88 10.897-10.902 10.897"
                />
            </defs>
            <g fill="none" fillRule="evenodd">
                <mask id="b" fill="#fff">
                    <use xmlns="http://www.w3.org/1999/xlink" xlinkHref="#a"/>
                </mask>
                <use fill="#FEFEFE"/>
                <g fill="#D4107A" mask="url(#b)">
                    <path d="M0 0h120v50H0z"/>
                </g>
            </g >
        </svg >
    </div>
);

请原谅蓝色背景。这是我在测试开发环境中的背景颜色。