Question

我正在创建一个使用角度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，但是在此处发布，因为当我试图解决这个问题时谷歌的结果很高。

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

"../node_modules/octicons/build/build.css",
构建一个指令，将图标的名称传递给（https://octicons.github.com/处可搜索）。这是一种方法，但通过逻辑看你可以想象，如果它对你的应用程序有意义，可以采取其他方式。您可能会在SharedModule中创建此指令并将SharedModule导入到您要使用的任何功能模块中。

＆＃13;

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, 'color', this.color)
        }
        if (this.width) {
            this.renderer.setStyle(icon, 'width', this.width);
            this.renderer.setStyle(icon, 'height', '100%');
        }
    }

}

＆＃13;

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

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

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

Answer 2

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

node_modules / octicons /建造/

你会找到一个名为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图标要简单得多。如果您按照上述说明操作，请从<svg>...</svg>文件中删除index.html块，然后转到显示图标的模板，并使用以下内容替换当前标记

<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。

Answer 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。

如何使用角度为2的Octicon

3 个答案: