SPMS AngularIcons

This library was generated with Angular CLI version 15.2.0.

This is a Angular icons library created to serve SPMS applications.

Installation

Install the package in your project directory with:

yarn add @spms/angular-icons

This is a Angular Material based library, so if you don't already have it, you will also need to install the following package:

ng add @angular/material

Usage

You need to import the SPMSAngularIconsModule to be able to use the icons library in your app.module.ts file.

import { SPMSAngularIconsModule } from '@spms/angular-icons';

@NgModule ({
  imports: [
    SPMSAngularIconsModule,
  ]
})
class AppModule {}

Add the icon tag to the html file like so:

<spms-icon fontIcon="user" color="primary" size="medium" />

<spms-logo fontIcon="sns" color="primary" size="120px" />

Note: We are working in our docs application. Click here to access a provisional reference docs and the list of available icons.

Props

Use the color and size props to customize the icon.

1. Color

To customize the color of the icon, you can use some of the @spms/styleguide color or any hex code like #333333;

2. Size

To change the size of the icon, you can use small, medium, large, xlarge or any px value like 36px.

small = 20px x 20px medium = 24px x 24px large = 40px x 40px xlarge = 60px x 60px

Note: If you are using spms-logo component, the size prop will only affect the width of the component. In this case, the height will be auto.

Note: By default, the SPMS icons use color="primary" and size="medium".