如何使用Octicon具有角2

我用角2，自举4，我发现，glyphicons被丢弃创建一个应用程序，所以我决定用Octicon的建议，如何使用Octicon具有角2

我做npm install --save octicons

之后，我没有承受任何事情。我以为我必须只包括octicons.css但这并不奏效。

它仅包含

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

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

来源

2016-12-29 Dinkar Thakur

-2

包括在你的脑袋标签：

<head> 
    <link rel="stylesheet" href="node_modules/octicons/build/font/octicons.css"> 
</head>

注：

确保这条道路node_modules/octicons/build/font/octicons.css是正确的，你有你的它节点模块内。

而且使用它

 <span class="octicon octicon-clippy"></span>

来源

2016-12-29 11:47:30 Milad

但我没有看到生成文件夹内的任何“字体”文件夹。 –

@DinkarThakur，那么字体文件夹在哪里：P – Milad

它从来没有创建！ –

这不是添加一个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

UPDATE

我想回来这是我写上面的回答很匆忙的文章。虽然上述解决方案将工作，但它是一个相当“肮脏”的解决方案恕我直言。将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。

来源

2017-01-18 20:48:50 dparsons

我真的很喜欢这个答案。清洁，它即刻起作用。谢谢！ –

我想不出任何更糟糕的解决方案，用文件路径污染我的HTML。 – smatthews1999

可以在打字稿导入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-22 17:53:30 sax

这可以让您在您的Angular应用程序中轻松实现可重复使用的实际SVG标签。积分为robisim74 on GitHub，但在这里发布，因为当我试图解决这个问题时，这是Google的高分。

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

"../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, 'color', 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>

来源

2018-01-26 20:06:25 jmq

如何使用Octicon具有角2

回答

相关问题