如何使用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

回答

相關問題