kit-icons

README

Icons

Icons registry and component for svg icons.

Usage

Add icons to the registry:

// add one icon (define url)
this.iconsRegistry.add({name: 'star', url: '/assets/icons/star.svg'});
// or define xml
this.iconsRegistry.add({name: 'cloud', xml: '<svg xmlns="http://www.w3.org/2000/svg" ...'});

// or a set of icons
this.iconsRegistry.add([
  {name: 'star', url: '/assets/icons/star.svg'},
  {name: 'cloud', xml: '<svg xmlns="http://www.w3.org/2000/svg" ...'},
]);

And then insert an icon:

<kit-icon name="star"></kit-icon>

Size

By default icons have 1em height and proper shift to looking nice in a text line.

Also you can define any size:

// One value for width and height
<kit-icon name="star" size="40px"></kit-icon>

// Separated values for width and height
<kit-icon name="cloud" [size]="['80px', '40px']"></kit-icon>

Color

By defaul fill color is currentcolor (use the text-color of parent element).

You can define fill color:

<kit-icon name="star" color="#ff0000"></kit-icon>

A11y

Use title and desc properties to add <title> and <desc> elements into <svg>. Also binds aria-labeledby attribute that points to the elements.

Intersection load

Icon can load and render only after viewport intersection, set intersectionLoad param to true.

Server-rendering

Do not forget to define full url-path to files:

this.iconsRegistry.add([
  {name: 'search', url: `${environment.assetsUrl}/icons/search.svg`},
  ...
]);

API

[class] KitIconComponent

@Component

Selector:'kit-icon'

Component for rendering svg icon.

SVG element can be customized by component's inputs. Also you can declare next css vars: --kitIconSvgColor, --kitIconSvgHeight, --kitIconSvgPosition, --kitIconSvgTop, --kitIconSvgWidth.

Members

SignatureDescription
@Input() color = 'currentcolor'

Svg fill color.

@Input() name: string

Name in the registry.

@Input() size: string | [string, string]

Size. If not specified icon size depends on line-height. Height and width can be specified separately by passing array [height, width]. Accepts any css sizing ('32px', '100%', '2em').

@Input() title: string

A11y title.

@Input() desc: string

A11y description.

@Input() intersectionLoad = false

Load and render icon only when visible.

@Input() xml: string

Pass svg xml directly.

[class] KitIconsRegistryService

@Injectable

Provided in:'root'

Icons registry.

this.iconsRegistry.add({name: 'star', url: '/assets/icons/star.svg'});
// or
this.iconsRegistry.add([
{name: 'star', url: '/assets/icons/star.svg'},
{name: 'cloud', url: '/assets/icons/cloud.svg'},
]);

Use in a template

<kit-icon name="star"></kit-icon>

Members

SignatureDescription
add(icon: KitIcon | KitIcon[])

Add icons to registry.

[class] KitIconsModule

@NgModule

Exports:[ KitIconComponent, ]

[interface] KitIcon

Members

SignatureDescription
name(): string
url(): string
xml(): string
size(): string

[interface] KitIconSource

Members

SignatureDescription
svg(): string
size(): string

[interface] KitIconCached

Members

SignatureDescription
name(): string
svg(): BehaviorSubject<string | null>