angular - 如何在 Angular 2 中使用 Octicon

Question

我正在使用 angular 2、bootstrap 4 创建一个应用程序，我发现 glyphicons 被删除了，所以我决定按照建议使用 Octicon，

我做了 npm install --save octicons

在那之后我什么都不明白了。我以为我必须只包含 octicons.css 但那没有用。

它只包含

.octicon {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
}

使用 Octicon 的简单步骤是什么？

Answer 1

这使您可以在 Angular 应用程序中轻松重用实际的 SVG 标签。归功于robisim74 on GitHub , 但在这里发帖是因为当我试图弄明白时这是一个很高的谷歌结果。

1. npm install --save octicons

2. 在 styles 下的 .angular-cli.json 文件中:

   "../node_modules/octicons/build/build.css",

3. 构建一个将图标名称传递给的指令(可在 https://octicons.github.com/ 搜索)。这是实现它的一种方法，但是通过逻辑来看，如果对您的应用程序有意义，您可以想象以其他方式实现它。你可能会在你的 SharedModule 中设置这个指令并导入 SharedModule放入您想使用的任何功能模块中。

import { Directive, Input, OnInit, ElementRef, Renderer2 } from '@angular/core';

import * as octicons from 'octicons';

@Directive({
    selector: '[octicon]'
})
export class OcticonDirective implements OnInit {

    @Input() octicon: string;
    @Input() color: string;
    @Input() width: number;

    constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

    ngOnInit(): void {
        const el: HTMLElement = this.elementRef.nativeElement;
        el.innerHTML = octicons[this.octicon].toSVG();

        const icon: Node = el.firstChild;
        if (this.color) {
            this.renderer.setStyle(icon, 'fill', this.color);
        }
        if (this.width) {
            this.renderer.setStyle(icon, 'width', this.width);
            this.renderer.setStyle(icon, 'height', '100%');
        }
    }

}

1. 然后在您的模板中，使用一些示例:

   <span octicon="gear"></span>

   <span octicon="gear" color="red" width="32"></span>