React组件中如何移除SVG图标内部右侧的空白区域？

开发者阿泽

2026-7-17

移除SVG图标右侧空白的解决方案

你的问题根源在于SVG的viewBox范围远大于图标的实际尺寸，导致右侧出现多余空白。以下是具体解决步骤：

1. 获取图标的精确边界

通过浏览器开发者工具获取<path>元素的真实边界：

渲染组件后，在控制台选中SVG内的路径元素，执行命令：
```
document.querySelector('path').getBBox()
```
会得到类似结果：{ x: 1.875, y: 1.875, width: 15.481, height: 16.25 }，这就是图标的实际占用范围。

2. 修正viewBox参数

将原viewBox="0 0 28 20"替换为上述获取到的边界值，确保viewBox完全包裹图标。

3. 可选：优化对齐方式

如果需要图标严格对齐SVG左上角且保持比例，可添加preserveAspectRatio="xMinYMin meet"属性。

修改后的组件代码

import * as React from "react";

function SvgTelephoneIcon(props) {
    const {iconwidth, iconheight, color} = props;
    return (
        <svg
            width={iconwidth}
            height={iconheight}
            viewBox="1.875 1.875 15.481 16.25"
            preserveAspectRatio="xMinYMin meet"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            {...props}
        >
            <path
                d="M16.25 18.125h-.106C3.863 17.419 2.119 7.056 1.875 3.894A1.875 1.875 0 0 1 3.6 1.875h3.444a1.25 1.25 0 0 1 1.162.788L9.156 5a1.25 1.25 0 0 1-.275 1.35L7.55 7.694a5.856 5.856 0 0 0 4.737 4.75l1.357-1.344A1.25 1.25 0 0 1 15 10.844l2.356.944a1.25 1.25 0 0 1 .769 1.162v3.3a1.875 1.875 0 0 1-1.875 1.875Zm-12.5-15a.625.625 0 0 0-.625.625v.05c.288 3.7 2.131 12.45 13.087 13.075a.625.625 0 0 0 .663-.587V12.95l-2.356-.944-1.794 1.781-.3-.037C6.987 13.069 6.25 7.631 6.25 7.575l-.037-.3 1.774-1.794-.937-2.356h-3.3Z"
                fill={color}
            />
        </svg>)
}
export default SvgTelephoneIcon;