使用Font Awesome SVG创建Angular元素减冗余的合规性与实现问题

只要你使用的是 Font Awesome Free 授权范围内的图标，该操作完全合规，不会违反相关许可协议。
Free 版图标遵循 CC BY 4.0、MIT、SIL OFL 1.1 三种开源许可的组合，仅在内部项目中提取少量 SVG 自用、不二次分发图标资源本身的场景下，不需要额外附加声明，也没有使用限制。如果你使用的是 Font Awesome Pro 版图标，只要你持有对应版本的合法授权，同样可以按需提取 SVG 在项目内使用。

完全可以实现，最轻量化的方案是封装为 Angular 原生组件，示例如下：

2.1 单图标组件封装示例 #

创建SpecialIconComponent组件，代码如下：

// special-icon.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'special-icon',
  template: `
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
      <path d="M570.69,236.27,512,184.44V48a16,16,0,0,0-16-16H432a16,16,0,0,0-16,16V99.67L314.78,10.3C308.5,4.61,296.53,0,288,0s-20.46,4.61-26.74,10.3l-256,226A18.27,18.27,0,0,0,0,248.2a18.64,18.64,0,0,0,4.09,10.71L25.5,282.7a21.14,21.14,0,0,0,12,5.3,21.67,21.67,0,0,0,10.69-4.11l15.9-14V480a32,32,0,0,0,32,32H480a32,32,0,0,0,32-32V269.88l15.91,14A21.94,21.94,0,0,0,538.63,288a20.89,20.89,0,0,0,11.87-5.31l21.41-23.81A21.64,21.64,0,0,0,576,248.19,21,21,0,0,0,570.69,236.27ZM288,176a64,64,0,1,1-64,64A64,64,0,0,1,288,176ZM400,448H176a16,16,0,0,1-16-16,96,96,0,0,1,96-96h64a96,96,0,0,1,96,96A16,16,0,0,1,400,448Z"/>
    </svg>
  `,
  styles: [`
    :host {
      display: inline-flex;
      align-self: center;
      fill: #000;
    }
    svg {
      height: 1em;
      width: 1em;
    }
    :host(.svg-baseline) svg {
      top: .125em;
      position: relative;
    }
  `]
})
export class SpecialIconComponent {}

将组件注册到对应 NgModule 的 declarations 数组后，即可直接在模板中使用，效果和示例要求完全一致：

<special-icon class="svg-baseline"></special-icon>

2.2 多图标通用组件优化 #

如果有25个图标需要使用，可以将所有图标的路径信息存入常量映射表，通过@Input传入图标名动态渲染，只需要一个组件即可支持所有图标使用，进一步减少冗余代码。
如果需要封装为不依赖Angular环境的原生自定义HTML元素，可以使用Angular Elements将组件打包为标准Web Components，注册后即可在任意场景下直接使用<SpecialIcon>标签。

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