Angular component for Iconify.
npm install @miles170/iconify-angularAngular implementation of Iconify, strongly inspired from Iconify-React.
If you are using NPM:
npm install @miles170/iconify-angular
If you are using Yarn:
yarn add @miles170/iconify-angular
This package does not include icons. Icons are split into separate packages that available at NPM. See Iconify-React.
Assign the icon to an instance variable in the component:
``typescript
import { Component } from '@angular/core';
import home from '@iconify/icons-mdi/home';
import groupAdd from '@iconify/icons-mdi/group-add';
import bellSlash from '@iconify/icons-fa-solid/bell-slash';
@Component({
selector: 'ic-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
homeIcon = home;
groupAddIcon = groupAdd;
bellSlashIcon = bellSlash;
}
`
Use it inside your template:
` This is the inline icon: html`
- icon [object, required]: icon object from @iconify/icons-* packages
- width [string | number]: width of icon. Default value is "1em".
- height [string | number]: height of icon. Default value is "1em".
- hFlip [boolean]: flip icon horizontally
- vFlip [boolean]: flip icon vertically
- flip [string]: same as hFlip and vFlip. Value is "horizontal", "vertical" or "horizontal,vertical"
- rotate [number | string]: rotate icon. Value is number 0-3 (1 = 90deg, 2 = 180deg, 3 = 270deg) or string "90deg", "180deg", "270deg"
- color [string] - icon color, usable only for colorless icons. By default colorless icons use currentColor, so you can set color using stylesheet by setting text color. This property can override it.
- align [string] - icon alignment. It matters only when width and height are both set and width/height ratio doesn't match icon ratio. Value is a string that includes any of these values separated by comma: horizontal alignment: "left", "center", "right", vertical alignment: "top", "middle", "bottom", slice: "meet", "slice". Example: align="left,middle,slice". Default value is "center,middle,meet"
Run ng generate component component-name --project iconify to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project iconify.--project iconify
> Note: Don't forget to add or else it will be added to the default project in your angular.json file.
Run ng build iconify to build the project. The build artifacts will be stored in the dist/ directory.
After building your library with ng build iconify --prod (https://v9.angular.io/guide/ivy#maintaining-library-compatibility), go to the dist folder cd dist/iconify and run npm publish.
Run ng test iconify to execute the unit tests via Karma.
To get more help on the Angular CLI use ng help` or go check out the Angular CLI README.