为何导入SVG至Icon对象后无法显示？附相关代码信息

我来帮你梳理下可能导致SVG不显示的原因，以及对应的解决办法：

1. 优先替换绝对路径为相对路径 #

你现在使用的是本地系统的绝对路径/Users/myName/Documents/GitHub/GitHub_REPO/repo_name/src/images/svg-1.svg，这种路径在项目打包部署后必然失效，而且webpack这类打包工具也无法正确解析它。

建议换成相对路径：比如你的ServicesIcon组件文件如果在src/components目录下，SVG在src/images，那相对路径就是../images/svg-1.svg。

2. 确认SVG的正确使用方式 #

结合你给出的styled.div代码，这里提供两种常用的正确写法：

方式一：作为背景图引入 #

import styled from 'styled-components';
// 用相对路径导入SVG
import serviceSvg from '../images/svg-1.svg';

export const ServicesIcon = styled.div`
  height: 160px;
  width: 160px;
  margin-bottom: 10px;
  // 绑定背景图
  background-image: url(${serviceSvg});
  // 确保SVG适配容器（可根据需求选cover或contain）
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
`;

方式二：直接作为React组件引入 #

（这种方式需要项目支持SVG组件导入，Create React App默认支持；自定义webpack则需配置@svgr/webpack）

import styled from 'styled-components';
import ServiceSvg from '../images/svg-1.svg';

export const ServicesIcon = styled.div`
  height: 160px;
  width: 160px;
  margin-bottom: 10px;
`;

// 在组件中内嵌SVG使用
function ServicesComponent() {
  return (
    <ServicesIcon>
      <ServiceSvg style={{ width: '100%', height: '100%' }} />
    </ServicesIcon>
  );
}

export default ServicesComponent;

3. 排查SVG文件本身是否正常 #

直接用浏览器打开你的SVG文件本地路径，看看能不能正常显示。如果浏览器里都打不开，那就是SVG文件本身存在语法错误或损坏，需要修复SVG内容。

4. 检查样式是否被覆盖或缺失 #

可以临时给ServicesIcon加个背景色（比如background: #ccc;），验证这个div是否正常渲染在页面上：

• 如果div没出现，可能是组件未被正确挂载
• 如果div出现但看不到SVG，可能是SVG颜色与背景色一致、background-size未设置导致SVG被裁剪，或者全局样式覆盖了你的自定义样式

如果按照上面的步骤还是没解决，可以把你导入和使用SVG的完整代码、项目目录结构告诉我，我再帮你精准排查~

内容的提问来源于stack exchange，提问作者user13518103