使用 Font Awesome SVG 创建一个简单的 Angular 元素以减少冗余？

Question

我正在查看这些链接 (replacing FA with SVG, extracting SVG) 以使用 Font Awesome SVG 代码，而不是 Font Awesome 库，因为我只需要约 25 个图标。我假设这会减少我的构建文件大小？

问题 -

这样做是否侵犯了任何版权或其他 Font Awesome 许可证？
在 Angular 中有没有办法获取 SVG 代码并将其构建到 HTML 元素中以减少冗余？

例如。替换这个

.fa-svg-icon {
    display: inline-flex;
    align-self: center;
    /* 
        Define a global color for the icons 
        In this case black
    */
    fill: #000;
}
/*
    Define the size of the default icons
*/
.fa-svg-icon svg {
    height:1em;
    width:1em;
}

/*
    Positionate the SVG correctly
*/
.fa-svg-icon.svg-baseline svg {
    top: .125em;
    position: relative;
}

<span class="fa-svg-icon svg-baseline">
  <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>
</span>

像这样

<SpecialIcon class="fa-svg-icon svg-baseline"></SpecialIcon>

Answer 1

问题二：

您可以在 Angular 中创建自定义组件，通过将图标名称作为输入来减少冗余：

图标组件：

@Component({
  selector: 'SpecialIcon',
  templateUrl: './SpecialIcon.component.html',
  styleUrls: ['./SpecialIcon.component.scss']
})
export class IconComponent {
  @Input() iconName=''; // Take the icon name as input to this component
  constructor() { }
}

HTML:

<ng-container [ngSwitch]="iconName">
  <ng-container *ngSwitchCase="'baseline'">
    <span class="fa-svg-icon svg-baseline">
      <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>
    </span>
  </ng-container>
<!--For every svg, you will have to add in a switch case-->
  <ng-container *ngSwitchCase="'other'">
    <span class="fa-svg-icon svg-other">
      <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>
    </span>
  </ng-container> 
<!--Default case is optional though. -->
  <ng-container *ngSwitchDefault>
    <span class="fa-svg-icon svg-default">
      <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>
    </span>
  </ng-container> 
</ng-container>

CSS：将所有 CSS 放入 SpecialIcon.component.scss 文件中。您可以为该文件中的每个图标设置单独的 CSS。

/*
    For each icon, you can have different stylings
*/
.fa-svg-icon.svg-baseline svg {
    top: .125em;
    position: relative;
}

用法：给组件传入图标名称

<SpecialIcon [iconName]="'baseline'"></SpecialIcon >

问题一：官网说是开源的，大家可以使用。 https://fontawesome.com/v4.7/license/

Font Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.

使用 Font Awesome SVG 创建一个简单的 Angular 元素以减少冗余？

Creating a simple Angular element using the Font Awesome SVG to reduce redundancy?

html

angular

svg

font-awesome