8

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

我做了npm install --save octicons

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

它只包含

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

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

4

3 回答 3

15

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

  1. npm install --save octicons

  2. 在您的 .angular-cli.json 文件中styles：

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

  3. 构建一个指令，将图标的名称传递给（可在https://occticons.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>

于 2018-01-26T20:06:25.990 回答
2

它不像您发现的那样添加 CSS 文件那么容易。完成后npm install --save octicons，如果您导航到以下文件夹

node_modules/ocicons/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>

其中大部分都包含在手册页中，因此您可能需要返回阅读它。你绝对应该看看它链接到的关于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 有一篇很好的文章解释了使用g和symbol定义 SVG 图标之间的区别；那篇文章清楚地说明了为什么我们不需要viewBox在我们的内联元素上定义。

于 2017-01-18T20:48:50.540 回答
1

您可以在 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。

于 2017-06-22T17:53:30.483 回答