[Library | Trunk]: Add icon library
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@59564 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
k.triantafyllou
parent
e46de09d38
commit
5b5c748ddc
|
|
@ -0,0 +1,66 @@
|
||||||
|
import {Component, Input, OnInit} from "@angular/core";
|
||||||
|
import {IconsService} from "./icons.service";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* First add your icon to Icon registry, by adding this to your component Module.
|
||||||
|
*
|
||||||
|
* e.g export class ExampleModule {
|
||||||
|
* constructor(private iconsService: IconsService) {
|
||||||
|
* this.iconsService.registerIcons([arrow_right])
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
@Component({
|
||||||
|
selector: 'icon',
|
||||||
|
template: `
|
||||||
|
<span *ngIf="svg" [class.uk-display-inline-block]="!flex" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
|
||||||
|
`
|
||||||
|
})
|
||||||
|
export class IconsComponent implements OnInit{
|
||||||
|
public svg;
|
||||||
|
public style;
|
||||||
|
/**
|
||||||
|
* True if this icon should have display flex (Optional, Default: false)
|
||||||
|
* */
|
||||||
|
@Input()
|
||||||
|
public flex = false;
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* Add custom class(es)(Optional)
|
||||||
|
* */
|
||||||
|
@Input()
|
||||||
|
public customClass;
|
||||||
|
/**
|
||||||
|
* Color of svg (Optional)
|
||||||
|
* */
|
||||||
|
@Input()
|
||||||
|
public fill;
|
||||||
|
/**
|
||||||
|
* Color of svg stroke (Optional)
|
||||||
|
* */
|
||||||
|
@Input()
|
||||||
|
public stroke;
|
||||||
|
/**
|
||||||
|
* Size of svg (Default: 1)
|
||||||
|
* */
|
||||||
|
@Input()
|
||||||
|
public ratio = 1;
|
||||||
|
/**
|
||||||
|
* Name of icon in registry (Required)
|
||||||
|
* */
|
||||||
|
@Input()
|
||||||
|
set name(iconName: string) {
|
||||||
|
this.svg = this.iconsService.getIcon(iconName);
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(private iconsService: IconsService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.style = {
|
||||||
|
transform: 'scale(' + this.ratio + ')',
|
||||||
|
fill: this.fill,
|
||||||
|
stroke: this.stroke
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {NgModule} from "@angular/core";
|
||||||
|
import {CommonModule} from "@angular/common";
|
||||||
|
import {IconsComponent} from "./icons.component";
|
||||||
|
import {SafeHtmlPipeModule} from "../pipes/safeHTMLPipe.module";
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
imports: [CommonModule, SafeHtmlPipeModule],
|
||||||
|
declarations: [IconsComponent],
|
||||||
|
exports: [IconsComponent]
|
||||||
|
})
|
||||||
|
export class IconsModule {}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import {Injectable} from "@angular/core";
|
||||||
|
import {Icon} from "./icons";
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root'
|
||||||
|
})
|
||||||
|
export class IconsService {
|
||||||
|
|
||||||
|
private registry = new Map<string, string>();
|
||||||
|
|
||||||
|
public registerIcons(icons: any[]): void {
|
||||||
|
icons.forEach((icon: Icon) => this.registry.set(icon.name, icon.data));
|
||||||
|
}
|
||||||
|
|
||||||
|
public getIcon(iconName: string): string | undefined {
|
||||||
|
if (!this.registry.has(iconName)) {
|
||||||
|
console.warn(`We could not find Icon with the name ${iconName}, did you add it to the Icon registry?`);
|
||||||
|
}
|
||||||
|
return this.registry.get(iconName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
export interface Icon {
|
||||||
|
name: string,
|
||||||
|
data: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const arrow_right: Icon = {
|
||||||
|
name: 'arrow_right',
|
||||||
|
data: '<svg height="20" viewBox="0 0 16 16" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12.578,4.244,5.667,11.155V8.167A.833.833,0,1,0,4,8.167v5A.832.832,0,0,0,4.833,14h5a.833.833,0,0,0,0-1.667H6.845l6.911-6.911a.833.833,0,1,0-1.178-1.178h0Z" transform="translate(7.071 19.799) rotate(-135)"></path></svg>'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const book: Icon = {
|
||||||
|
name: 'book',
|
||||||
|
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 22.106 30"><path id="book" d="M26.9,9.405V25.749c0,.824-.713,1.218-1.579,1.832a1.034,1.034,0,0,1-1.579-.927V10.685a.877.877,0,0,0-.5-.845c-.379-.194-12.218-6.418-12.218-6.418A2.239,2.239,0,0,0,8.9,3.4,4.487,4.487,0,0,0,7.119,4.808l12.916,7.077a.917.917,0,0,1,.555.815V29.755a1.057,1.057,0,0,1-.582.924,1.209,1.209,0,0,1-1.136-.042c-.339-.207-12.274-7.526-13.063-8-.379-.227-.823-.693-.832-1.039L4.8,5.355a2.612,2.612,0,0,1,.456-1.629c1.1-1.711,4.94-3.658,6.884-2.65L26.348,8.268A1.151,1.151,0,0,1,26.9,9.405Z" transform="translate(-4.799 -0.8)"/></svg>'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const database: Icon = {
|
||||||
|
name: 'database',
|
||||||
|
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 23.864 30"><path id="database" d="M28.2,21.443c-1.437,2.324-6.026,4.025-11.465,4.025S6.7,23.767,5.266,21.443c-.3-.494-.466-.23-.466.012v3.412c0,3.307,5.342,6.733,11.932,6.733s11.932-3.426,11.932-6.731V21.457C28.664,21.213,28.5,20.949,28.2,21.443Zm.018-8.721c-1.415,2.054-6.02,3.562-11.483,3.562S6.661,14.776,5.246,12.722c-.292-.423-.446-.193-.446,0v4.017c0,3,5.342,5.435,11.932,5.435s11.932-2.434,11.932-5.435V12.719c0-.19-.157-.42-.449,0ZM16.732,1.6C10.142,1.6,4.8,3.611,4.8,6.088V8.236c0,2.627,5.342,4.758,11.932,4.758s11.932-2.131,11.932-4.758V6.088C28.664,3.611,23.322,1.6,16.732,1.6Z" transform="translate(-4.8 -1.6)"/></svg>'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const cog: Icon = {
|
||||||
|
name: 'cog',
|
||||||
|
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30.001 30"><path id="cog" d="M29.67,17.558A5.108,5.108,0,0,1,32.557,13.2a15.981,15.981,0,0,0-1.235-2.985A4.827,4.827,0,0,1,26.48,8.634a4.665,4.665,0,0,1-1.22-4.841,15.611,15.611,0,0,0-2.985-1.234,5.655,5.655,0,0,1-4.717,2.884,5.658,5.658,0,0,1-4.719-2.884A15.571,15.571,0,0,0,9.855,3.793,4.661,4.661,0,0,1,8.634,8.634a4.824,4.824,0,0,1-4.841,1.577A15.756,15.756,0,0,0,2.559,13.2a5.106,5.106,0,0,1,2.884,4.362,5.661,5.661,0,0,1-2.884,4.719,15.89,15.89,0,0,0,1.234,2.985A4.667,4.667,0,0,1,8.634,26.48a4.669,4.669,0,0,1,1.221,4.841,15.779,15.779,0,0,0,2.985,1.238,5.647,5.647,0,0,1,4.719-2.887,5.658,5.658,0,0,1,4.719,2.887,16.052,16.052,0,0,0,2.985-1.238,4.667,4.667,0,0,1,1.22-4.841A4.84,4.84,0,0,1,31.325,24.9a15.741,15.741,0,0,0,1.235-2.985A5.106,5.106,0,0,1,29.67,17.558Zm-12.111,6.52a6.522,6.522,0,1,1,6.52-6.52A6.521,6.521,0,0,1,17.558,24.079Z" transform="translate(-2.559 -2.559)"/></svg>'
|
||||||
|
};
|
||||||
|
|
||||||
|
export const earth: Icon = {
|
||||||
|
name: 'earth',
|
||||||
|
data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30 30"><path id="earth" d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"/></svg>'
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue