제대로 GitHub 아이콘을 사용하고 싶을 때 편리한 Octicons

요전날 어떤 앱을 만들고 있어 GitHub 로고나 병합 아이콘이 사용하고 싶어졌습니다만, 그런 때에 편리한 패키지가 있었으므로 소개합니다.

앱은 Angular & Angular Material에서 만들었습니다. material icon 안에 있지요, GitHub 아이콘. Font Awesome 에는 여러가지 갖추어져 있습니다만, 로고와 병합 아이콘만을 위해서 패키지 추가하는 것도...와 주저해 버렸습니다. SVG를 다운로드하고 사용자 정의하여 사용하는 기량은 나에게는 없습니다.

@primer/Octicons

거기서 찾은 것이 @primer/octicons 입니다.
htps : // p 리메 r. 스타 ぇ / 오 c 콘 s /


패키지 사이즈는 173 kb와 경량!
GitHub 웹사이트에서 사용되는 아이콘이 하나씩 있습니다.

설치

$ npm install @primer/octicons --save

지시어로 사용

문서를 봐도 Angular 로 사용하는 방법이 실려 있지 않았기 때문에 issue 를 참고로 지시어를 만들었습니다.

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import * as octicons from '@primer/octicons';

@Directive({
  selector: '[octicon]',
})
export class OcticonDirective implements OnInit {
  @Input() icon: string = null;
  @Input() width = 20;
  @Input() fill = '#000000';
  @Input() class = '';

  constructor(
    private ref: ElementRef,
  ) {}

  ngOnInit() {
    this.getElement().innerHTML = this.getSVG(this.icon, this);
  }

  private getElement(): HTMLElement {
    return this.ref.nativeElement;
  }

  private getSVG(name: string, options: {
    width: number,
    fill: string,
  }): string {
    if (!octicons[name]) {
      throw new Error(
        `${name} is invalid. The names below are available:\n ${Object.keys(octicons).join(',')}`
      );
    }

    return octicons[name].toSVG(options);
  }
}

octicons 사이트 에서 아이콘 이름을 검색하여 icon 에 전달합니다.

<i octicon icon="mark-github"></i>

채우기, 크기, 클래스는 선택 사항입니다.

<i octicon
  icon="mark-github"
  fill="#ffffff"
  width="25"
  class="my-class"
></i>

시험에 사용해보기

히나가타의 인덱스 페이지의 네비게이션 바에 조용히 펼쳐 보았습니다.

<span>Welcome</span>
  <div class="spacer"></div>
  ...
  <a octicon icon="octoface" fill="white" width="22"></a>
  <a octicon icon="mark-github" fill="white" width="22"></a>
  <a octicon icon="git-merge" fill="white" width="22"></a>
  <a octicon icon="package" fill="white" width="22"></a>

빌드 크기

$ ng new 그냥 프로젝트를 빌드 하면 main-es2015.js 의 크기는 56.4 kB 입니다. octicon 4개의 지시문을 사용하여 빌드하면 60.5 kB로 증가. 그 차이 4.1 kB 그리고 가볍습니다.

샘플 코드

octicons 에는 한가지의 GitHub 아이콘이 갖추어져 있으므로, 색과 사이즈를 변경하면 여러가지 편리하게 임베드할 수 있습니다. 샘플 코드를 써 보았으므로, 좋으면 참고로 해 주세요.

h tps // s ckb ぃ t…