Clarity-Angular now supports Ahead-of-Time (AoT) compilation. Starting with 0.8.0, the clarity-angular npm package contains the files in es5 es2015 format that can be compiled with ngc compiler. In addition, the package contains clarity-angular.umd.js file. If your application is setup using systemJS, please update your systemJS configuration to point to the clarity-angular.umd.js file as shown in the README.
As part of 0.8.0, we have created a publically accessible API for customizing the Clarity Icons library in your application. At a high level, `ClarityIcons` is now a namespace off of the browser `window` object. More documentation is coming soon! So make sure to keep an eye on our documentation.
Using the newly released ClarityIcons API, you can now add your own icons to the publically available ClarityIcons architecture. Use the following call to add your icon to our library in your application:
ClarityIcons.add({"shapeNameGoesHere": "<svg ... >[your SVG code goes here]</svg>"});
This API method will assign your SVG markup to the named shape you sent it. It can then be retrieved like in your application like any other icon in the ClarityIcons library.
<clr-icon shape="shapeNameGoesHere"></clr-icon>
You can now create aliases for the icons in your application with a single API call:
ClarityIcons.alias({"bell": ["alarm", "oh-noehz"]});
The above alias method call will assign "alarm" and "oh-noehz" names to the existing "bell" icon shape. Now you can use the "bell" icon with any of the new names you have assigned it.
<clr-icon shape="bell"></clr-icon>
<clr-icon shape="alarm"></clr-icon>
<clr-icon shape="oh-noehz"></clr-icon>
Clarity Icons now includes new icon shapes such as
half-star
, circle-check
, and
storage
.
The architecture introduced in 0.7.5 to allow for solid, badged, and alerted icon variants has been extended to all applicable icons in Clarity.
Use the following classnames with your clr-icon
elements.
<clr-icon shape="..."></clr-icon>
<clr-icon shape="..." class="has-badge"></clr-icon>
<clr-icon shape="..." class="has-badge--success"></clr-icon>
<clr-icon shape="..." class="has-badge--error"></clr-icon>
<clr-icon shape="..." class="has-badge--info"></clr-icon>
<clr-icon shape="..." class="has-alert"></clr-icon>
<clr-icon shape="..." class="is-solid"></clr-icon>
<clr-icon shape="..." class="is-solid has-badge--success"></clr-icon>
<clr-icon shape="..." class="is-solid has-badge--error"></clr-icon>
<clr-icon shape="..." class="is-solid has-badge--info"></clr-icon>
<clr-icon shape="..." class="is-solid has-alert"></clr-icon>
Check out our icon documentation for more.
Added forRoot()
and forChild()
methods on
ClarityModule
to prevent reimport of services in lazy loaded feature modules. Click
here for more
information. Clarity Module should now be imported as follows:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ClarityModule } from 'clarity-angular';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
ClarityModule.forRoot(),
....
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
.card-subtitle
.group
.icon
.description
.title
.card-link
.card-overflow-menu
icon-color-*
style color classesicon-orientation-*
style direction classesicon-size-*
style size classes