修改Font Awesome实心SVG图标线条粗细问题求助

需要将项目中实心样式（fas）的Pencil图标线条改细，但free-regular-svg-icons中没有该图标，无法切换为常规（far）样式。尝试用CSS修改线条粗细但无效，相关DOM结构和尝试的CSS如下：

DOM结构 #

<fa-icon class="ng-fa-icon" ng-reflect-title="Pencil" ng-reflect-icon="fas,pencil-alt" title="Pencil">
 <svg role="img" data-icon="pencil" class="svg-inline--fa fa-pencil">
  <title id="svg-inline--fa-title-HaUt4gdrmqeA">Pencil</title>
  <path fill="currentColor" d="..."></path>
 </svg>
</fa-icon>

尝试的无效CSS #

fa-icon > svg > path {
  stroke: black !important;
  stroke-width: 1px !important;
}

方法1：转用描边渲染（最直接） #

实心Font Awesome图标是通过fill填充路径实现的，直接添加stroke不会生效。可以去掉填充，改用描边绘制图标，这样就能通过stroke-width控制线条粗细：

fa-icon > svg > path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important; /* 数值越小线条越细，按需调整 */
  stroke-linecap: round; /* 让线条端点更圆润，贴合原图标风格 */
  stroke-linejoin: round; /* 让线条拐角更圆润 */
}

注：currentColor可保留图标原有颜色，无需硬写固定色值

方法2：缩放裁剪法（无需修改渲染逻辑） #

通过放大图标并裁剪超出部分，让实心图标视觉上线条更细：

1. 给fa-icon添加容器：

<div class="icon-thinner">
  <fa-icon class="ng-fa-icon" ng-reflect-title="Pencil" ng-reflect-icon="fas,pencil-alt" title="Pencil"></fa-icon>
</div>

2. 添加对应CSS：

.icon-thinner {
  width: 24px; /* 设置最终需要的图标尺寸 */
  height: 24px;
  overflow: hidden;
}
.icon-thinner fa-icon > svg {
  width: 32px; /* 放大图标，数值越大视觉线条越细 */
  height: 32px;
  transform: translate(-4px, -4px); /* 平移让图标居中，数值=(放大尺寸-容器尺寸)/2 */
}

注：需根据实际效果调整放大比例和平移值

方法3：自定义修改SVG路径（最彻底） #

如果上述方法都不满足需求，可以手动修改SVG路径：

1. 从Font Awesome官网下载该图标原始SVG代码
2. 用Inkscape、Figma等工具打开，将实心路径转为描边路径，调整描边粗细后导出新SVG
3. 在Angular项目中注册自定义Font Awesome图标，替换原有的fas,pencil-alt使用

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