Sa Icon Component Documentation

The Angular Icon Component (sa-icon) provides an easy way to preview and customize SVG icons in your Angular applications.

Installation

Install the component using npm:

npm install sa-icon

Usage

Importing the Component

You can use the SaIconComponent either in an Angular module or as a standalone component.

Note: Please ensure to add your icons before starting the implementation. Go to add new Icons section

In AppModule:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { SaIconComponent } from "sa-icon";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, SaIconComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

As a Standalone Component:

import { bootstrapApplication } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { SaIconComponent } from "sa-icon";

bootstrapApplication(AppComponent, {
  imports: [SaIconComponent],
});

Using the Component

Add the sa-icon component to your HTML template:

<sa-icon icon="x"></sa-icon>

Component Inputs

| Input | Type | Default | Description | | -------- | -------- | -------------------- | -------------------------------------------- | | icon | string | '' | The ID of the icon to display (e.g., x). | | path | string | SaIconService.path | Path to the SVG file containing the icons. | | size | number | SaIconService.size | Default size of the icon (width and height). | | width | number | size | Custom width for the icon. | | height | number | size | Custom height for the icon. |

Example:

<sa-icon path="assets/custom-icons.svg" icon="check" size="30"></sa-icon>

Global Configuration

You can set global configurations for the component using Angular providers:

import { SaIconService } from "sa-icon";
import { IconConfig } from "sa-icon";

@NgModule({
  providers: [
    {
      provide: SaIconService,
      useValue: {
        config: {
          path: "assets/custom-icons/icons.svg",
          size: 32,
        } as IconConfig,
      },
    },
  ],
})
export class AppModule {}

Adding New Icons {#icons}

Step 1: Prepare the SVG File

You should have an SVG file containing all your icons. The file should use the <symbol> tag for each icon.

Example Existing File

<svg fill="none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="x" fill="none" viewBox="0 0 24 24">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.10964 2.54475C2.2806..." fill="currentColor"></path>
  </symbol>
</svg>

Step 2: Add the New Icon

Suppose you want to add a Facebook icon. Here’s the Facebook SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
    <path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z" stroke="#ff00ff" stroke-width="1.5" stroke-linejoin="round" />
    <path d="M16.9265 8.02637H13.9816C12.9378 8.02637 12.0894 8.86847 12.0817 9.91229L11.9964 21.4268M10.082 14.0017H14.8847" stroke="#ff00ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>

You need to copy its contents and wrap them in a <symbol> tag. Replace static colors (#ff00ff) with currentColor so you can style it using CSS. Ensure that you have an SVG file containing icons structured with <symbol> elements. For example:

<svg fill="none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="x" fill="none" viewBox="0 0 24 24">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.10964 2.54475C2.2806..." fill="currentColor"></path>
  </symbol>
</svg>

Step 3: Updated SVG File with Facebook Icon

<svg fill="none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="x" fill="none" viewBox="0 0 24 24">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.10964 2.54475C2.2806..." fill="currentColor"></path>
  </symbol>
  <symbol id="facebook" fill="none" viewBox="0 0 24 24">
    <path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
    <path d="M16.9265 8.02637H13.9816C12.9378 8.02637 12.0894 8.86847 12.0817 9.91229L11.9964 21.4268M10.082 14.0017H14.8847" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
  </symbol>
</svg>

Step 4: Use the New Icon

Now, you can use the new facebook icon like this:

<sa-icon icon="facebook"></sa-icon>

Important Notes:

• The fill property on the <symbol> tag must be none.
• Use currentColor for fill or stroke properties in the icon paths to allow color customization via CSS.

License

This project is licensed under the MIT License.