sal-icons v1.0.2

SAL Icon Library

This library can be consumed by a SPA to inject SVG icons inline.

Consuming the icon library

Icons are exported as individual objects, making them tree-shakeable.

export declare const salIconHistoryBw: {
  name: 'history_flat';
  data: string;
};

export const salIconHistoryBw = {
  name: 'history_flat',
  data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">...</svg>`
};

Using the IconsModule in the SAL Angular assets library (sal-ngx-assets), these icons can be registered and used immediately in any angular project.

import { IconRegistry, IconsModule } from 'sal-ngx-assets'
import { salIconHistoryFlat, salIconPasswordFlat } from 'sal-icons';

@NgModule({
  ...
  imports: [
    IconsModule,
  ],
})
export class AppModule { 
  constructor(private iconRegistry: IconRegistry){
    this.iconRegistry.registerIcons([
      salIconHistoryFlat,
      salIconPasswordFlat
    ])
  }
}

<sal-icon name="history_flat"></sal-icon>

Note that the icons must be imported and registered before they can be used. This ensures we aren't adding unnecessary code to our bundles. If you wish to import the entire icon library at once, import and register completeIconSet instead.

import {completeIconSet } from 'sal-icons';
...
export class AppModule { 
  constructor(private iconRegistry: IconRegistry){
    this.iconRegistry.registerIcons(completeIconSet)
  }
}

Updating the library

To make changes to the icon library: 1. Update the icon files in the ./svg-icons folder. 1. Make sure the filenames do not contain dots except the one preceding the extension. 1. Open a terminal and run npm run build:library" 1. Then publish the folder ./dist/icons to the repository with a new version number, and update the apps consuming the package by reinstalling it.

Notes on preparing the svg files

• Do not use dots in the filename except the one preceding the extension
• Only add fill attributes to elements inside the SVG if you don't want them inherit the color css property from their ancestors.
• do not give the SVG's dimensions (width and height). Their size is controlled by inheriting the font-size.