Extracting Svg from Font Awesome

Extracting SVG from Font Awesome

All per the SVG specification...

Unlike standard graphics in SVG, where the initial coordinate system has the y-axis pointing downward, the design grid for SVG fonts, along with the initial coordinate system for the glyphs, has the y-axis pointing upward for consistency with accepted industry practice for many popular font formats.

As per this comment, Changing the wrapper to <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> seems to do the trick,
where 1792 is the units-per-em and 1536 is the ascent on font-face element

How to import a font-awesome icon inside an svg in angular?

It's hard to give the perfect answer as it depends on what exactly you're trying to achieve.

One approach is to avoid fa-icon component altogether and render the icon path manually as part of your own SVG object.

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <path [attr.d]="faSkullCrossbones.icon[4]"></path>
</svg>

Another approach is to render fa-icon into SVG's symbol and then embed it with use.

<fa-icon [icon]="faSkullCrossbones" symbol="foobar"></fa-icon>

<svg viewBox='0 0 1000 1000' xmlns="http://www.w3.org/2000/svg">
  <use xlink:href="#foobar" />
</svg>

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

Question 2:

You can create a custom component in Angular to reduce redundancy by taking in icon name as input:

Icon Component:

@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: Place all your CSS in SpecialIcon.component.scss file. You can have separate CSS for each icon in this file.

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

Usage: Pass in the icon name to the component

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

Question 1: The official website says that its open source, so you can use it.
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.

How to export font-awesome svg icons as a base64 url?

Font Squirrel has options for doing this. Choose the expert option after uploading the font(s)
http://www.fontsquirrel.com/tools/webfont-generator

Note there are drawbacks to this, see https://github.com/FortAwesome/Font-Awesome/issues/294

---

Related Topics