mat-icon-srv

• generate a icon register service for angular project
• cli tool, NO need to included the codes in your angualar project, just use it to generate

install

• npm install mat-icon-srv -g

usage

angular

• creat or find a dir for service in your angular project
• goto the dir
• mat-icon-srv
• and then edit the config file svg-icons.ts to add icons
• in your app.component.ts, add
• import { MatIconRegisService} from "your-dir-path/mat-icon-regis.service";
• export class AppComponent {constructor(private icon_srv:MatIconRegisService) {}}
• use it in your page:

DEMO

generated service

config svg-icons.ts

app.component.ts

page

EXAMPLE

cd src
mkdir _services
cd _services
mat-icon-srv

vim svg-icon.ts
      export const src = [
          {
              name: "assigner",
              src: "../../assets/app/_components/task/assigner.svg",
              type: "url"
          },
          {
              name: "creater",
              src: "../../assets/app/_components/task/creater.svg",
              type: "url",
              ns: "namespace"
          },
          .....
          .....
      ]

 //in app.component.ts
 import { MatIconRegisService} from "./_services/mat-icon-regis.service";
    @Component({
      selector: "my-app",
      templateUrl: "./app.component.html"
    })
    export class AppComponent {
      constructor(
          private icon_srv:MatIconRegisService  //use it globally
      ) {}
    }     

  
  //in your page
    <mat-icon svgIcon="assigner"></mat-icon>
    <mat-icon svgIcon="namespace:creater"></mat-icon>
    <mat-icon svgIcon="src.string"></mat-icon>
    <mat-icon svgIcon="namespace:src.string"></mat-icon>
    <mat-icon svgIcon="incharger"></mat-icon>
    <mat-icon svgIcon="collaborator"></mat-icon>
    <mat-icon svgIcon="urliconset:incharger"></mat-icon>
    <mat-icon svgIcon="urliconset:collaborator"></mat-icon>
    <mat-icon svgIcon="supervisor"></mat-icon>
    <mat-icon svgIcon="reviewer"></mat-icon>
    <mat-icon svgIcon="striconset:supervisor"></mat-icon>
    <mat-icon svgIcon="striconset:reviewer"></mat-icon>      

CONFIG FORMAT

export const src = [
  /*
  //using url as source
  {
    name: "your-name", //<mat-icon svgIcon="your-name"></mat-icon>
    src: "svg-url",
    type: "url"
  },
  //using url as source with namespace
  {
    name: "your-name",
    src: "svg-url",
    type: "url",
    ns: "your-namespace" //<mat-icon svgIcon="your-namespace:your-name"></mat-icon>
  },
  //using string as source
  {
    name: "your-name",
    src:"<svg>...</svg>"
    type: "str"
  },
  //using string as source with namespace
  {
    name: "your-name",
    src: "<svg>...</svg>",
    type: "str",
    ns: "your-namespace" //<mat-icon svgIcon="your-namespace:your-name"></mat-icon>
  },
  //using iconset
  {
    src: "your-iconset-svg-url",
    type: "url",
    st:true
  },
  //using iconset as source with namespace
  {
    src: "your-iconset-svg-url",
    type: "url",
    st:true,
    ns:"your-namespace"
  },
  //using svgset-string as source
  {
    src: `
        <svg>
            <defs>
            ....
                <svg id="your-name1">...</svg>
                <svg id="your-name2">...</svg>
            ....
            </defs>
        </svg>
    `,
    type: "str",
    st:true,
  },
  //using svgset-string as source with namespace
  {
    src: `
        <svg>
            <defs>
            ....
                <svg id="your-name1">...</svg>
                <svg id="your-name2">...</svg>
            ....
            </defs>
        </svg>
    `,
    type: "str",
    st:true,
    ns:"your-namespace"
  },
  */
]

API

mat-icon-srv

• NO need, all cli

generated svg-icons.ts