Check all icons list.

Install

yarn add @feb-team/legao-icons-svg

# or use npm
npm install @feb-team/legao-icons-svg--save

Use Library Adapter

• React: See @feb-team/legao-icons-svg to learn about detail usage.

Basic Usage

import { LgAddOutlined } from '@feb-team/legao-icons-svg';

// import LgAddOutlined from '@feb-team/legao-icons-svg/es/LgAddOutlined';

console.log(LgAddOutlined);
// ==>
// {
//     "name":"lg-add",
//     "theme":"outlined",
//     "icon":{
//         "tag":"svg",
//         "attrs":{
//             "viewBox":"0 0 1024 1024",
//             "focusable":"false"
//         },
//         "children":[
//             {
//                 "tag":"path",
//                 "attrs":{
//                     "d":"M480 480V288q0-14 9-23t23-9 23 9 9 23v192h192q14 0 23 9t9 23-9 23-23 9H544v192q0 14-9 23t-23 9-23-9-9-23V544H288q-14 0-23-9t-9-23 9-23 23-9h192z"
//                 }
//             }
//         ]
//     }
// }

• Interfaces

This library export all SVG files as IconDefinition.

export type ThemeType = 'fill' | 'outline' | 'twotone'| 'func';

export interface IconDefinition {
  name: string; 
  theme: ThemeType;
  icon:
    | ((primaryColor: string, secondaryColor: string) => AbstractNode)
    | AbstractNode;
}

export interface AbstractNode {
  tag: string;
  attrs: {
    [key: string]: string;
  };
  children?: AbstractNode[];
}

Render Helpers

import { LgAddOutlined } from '@feb-team/legao-icons-svg';
import { renderIconDefinitionToSVGElement } from '@feb-team/legao-icons-svg/es/helpers';

const svgHTMLString = renderIconDefinitionToSVGElement(
  AccountBookFill,
  { extraSVGAttrs: { width: '1em', height: '1em', fill: 'currentColor' } }
);

console.log(svgHTMLString);
// ==>
// '<svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zM648.3 426.8l-87.7 161.1h45.7c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4v29.7h63.4c5.5 0 10 4.5 10 10v21.3c0 5.5-4.5 10-10 10h-63.4V752c0 5.5-4.5 10-10 10h-41.3c-5.5 0-10-4.5-10-10v-51.8h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h63.1v-29.7h-63.1c-5.5 0-10-4.5-10-10v-21.3c0-5.5 4.5-10 10-10h45.2l-88-161.1c-2.6-4.8-.9-10.9 4-13.6 1.5-.8 3.1-1.2 4.8-1.2h46c3.8 0 7.2 2.1 8.9 5.5l72.9 144.3 73.2-144.3a10 10 0 0 1 8.9-5.5h45c5.5 0 10 4.5 10 10 .1 1.7-.3 3.3-1.1 4.8z" /></svg>'

• Interfaces

declare function renderIconDefinitionToSVGElement(icon: IconDefinition, options?: HelperRenderOptions): string;

interface HelperRenderOptions {
  placeholders?: {
    primaryColor?: string; // default #333
    secondaryColor?: string; // default #E6E6E6
  };
  extraSVGAttrs?: {
    [key: string]: string;
  };
}

Build Project

npm run generate # Generate files to ./src
npm run build # Build library
npm run test # Runing Test