如何使用带有角 2 的 Octicon答案

【问题标题】：How to use Octicon with angular 2如何使用带有角 2 的 Octicon
【发布时间】：2017-05-13 17:36:37
【问题描述】：

我正在使用 angular 2, bootstrap 4 创建一个应用程序，我发现字形图标被丢弃了，所以我决定按照建议使用 Octicon，

我做了npm install --save octicons

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

它只包含

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

什么是使用 Octicon 的简单一步一步的方法？

【问题讨论】：

标签： angular octicons

【解决方案1】：

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

npm install --save octicons
在styles 下的 .angular-cli.json 文件中：

"../node_modules/octicons/build/build.css",
构建一个将图标名称传递给的指令（可在 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%');
        }
    }

}

然后在您的模板中，一些示例用法：

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

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

【讨论】：

顺便说一句，“颜色”应该改为“填充”
谢谢。仅在最近的 Angular 版本上使用一对 cmets（在 v9 中测试）：[2] 将 @import '~octicons/build/build.css'; 添加到 src/styles.css 和 [3] 选择器应为 appOcticon（例如 <span octicon="device-mobile" appOcticon></span>）。

【解决方案2】：

这并不像您发现的那样添加 CSS 文件那么容易。但是，在您执行npm install --save octicons 之后，如果您导航到以下文件夹

node_modules/occticons/build/

你会发现一个名为sprite.octicons-demo.html 的文件，如果你打开它，它会告诉你你需要做什么。基本上，要完成这项工作，您唯一需要做的就是打开该文件，复制 <svg>...</svg> 标签，将其粘贴到您的 index.html 中，然后像这样访问图标

<svg version="1.1" width="32" height="32" viewBox="0 0 16 16" class="octicon octicon-alert" aria-hidden="true"><use xlink:href="#alert" /></svg>

大部分内容都包含在man page 中，因此您可能需要返回阅读它。你一定要看看它在CSS-Tricks上链接到的文章

更新

我想回到这个，因为我很仓促地写了上面的答案。虽然上述解决方案可行，但恕我直言，这是一个非常“肮脏”的解决方案。将 SVG 标记直接放入文档的最大缺点之一是它会呈现为一个大的空块级元素。当然，您可以通过将<svg></svg> 标签包裹在<div style="display:none;"><svg>...</svg></div> 之类的东西中来解决这个问题，但同样，这很脏（更不用说所有那些内联SVG 会弄乱您的源代码）。

相反，我发现像对待任何其他图像一样对待 SVG 图标要简单得多。如果您按照上述说明进行操作，请从您的 index.html 文件中删除 <svg>...</svg> 块，然后转到显示图标的模板并将当前标记替换为以下内容

<svg width="32" height="32" class="octicon" aria-hidden="true"><use xlink:href="/node_modules/octicons/build/sprite.octicons.svg#alert" /></svg>

然后您应该会看到显示为 32x32 图像的警报图标。这里的两个区别是，除了指定所需的元素之外，您还提供了 svg 文件的相对路径，并且您没有定义 viewBox。同样，CSS-Tricks 有一个很好的 article，它解释了使用 g 和 symbol 定义 SVG 图标之间的区别；那篇文章清楚地说明了为什么我们不需要在我们的内联元素上定义viewBox。

【讨论】：

我真的很喜欢这个答案。干净，它可以立即工作。谢谢！
我想不出比文件路径污染我的 HTML 更糟糕的解决方案了。

【解决方案3】：

您可以在 Typescript 中导入 Octicon：

import { calendar } from 'octicons';

export class MyComponent implements OnInit {

  public calendarIcon: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.calendarIcon = this.sanitizer.bypassSecurityTrustHtml(calendar.toSVG());
  }

}

然后你就可以把它当成innerHTML了：

<div [innerHTML]="calendarIcon">

您可以编写管道进行清理 - 请参阅 Angular 2, DomSanitizer, bypassSecurityTrustHtml, SVG。

【讨论】：