使用FontAwesomeSVG創建一個簡單的Angular元素以減少冗余？

我正在查看這些鏈接（用 SVG 替換 FA，提取 SVG）以使用 Font Awesome SVG 代碼，而不是 Font Awesome 庫，因為我只需要大約 25 個圖示。我假設這會減少我的構建檔案大小？

問題-

1. 我這樣做是否違反了任何著作權或其他一些 Font Awesome 許可？
2. 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>

uj5u.com熱心網友回復：

問題2：

您可以在 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 是完全開源的，并且是 GPL 友好的。您可以將它用于商業專案、開源專案，或者您想要的任何東西。

標籤：html 有角的 svg 字体真棒

上一篇：圓上的SVG文本-更改文本方向

下一篇：webkit上的clipPath不呈現