All geek questions in one place

How to use Octicon with angular 2

I was building an application using angular 2, bootstrap 4, and I found out that the glyphics were dropped, so I decided to use Octicon as suggested,

I did npm install --save octicons

After that, I did not stand for anything. I thought I should include only octicons.css, but that did not work.

It contains only

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

What is the easy step of using Octicon?

+4
source share
4 answers

This gives you actual SVG tags that are easy to repeat in your Angular app. The loan goes to robisim74 on GitHub , but publishes it here because it was a good Google result when I tried to figure it out.

  • 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%');
        }
    }

}
Hide result

  1. :

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

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

+5

, 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, . , , CSS-Tricks

UPDATE

, . , "" IMHO. , 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 .

+2

Octicon Typescript:

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.

+1

:

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

:

Make sure this path is node_modules/octicons/build/font/octicons.csscorrect and it is inside your node modules.

And use it

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

Source: https://habr.com/ru/post/1665224/

More articles:


All Articles