API

@yzfe/svgicon

Props

Parameters (attributes) of the function to generate SVG icon data

export interface Props {
    /** icon data */
    data?: Icon
    width?: string | number
    height?: string | number
    scale?: string | number
    /** icon direction */
    dir?: string
    color?: string | string[]
    /** gradient stop colors */
    stopColors?: string[]
    title?: string
    fill?: boolean
    /** is use original color */
    original?: boolean
    /** Replace content, usually replace color */
    replace?: (svgInnerContent: string) => string
}

getPropKeys

Get the key array of props

export declare function getPropKeys(): (keyof Props)[];

svgIcon

Generate icon data based on the incoming attributes

declare function svgIcon(props: Props): SvgIconResult;

Options

Global options, affecting the default value of props

/** Global default options */
export interface Options {
    classPrefix?: string
    // Is stroke default
    isStroke?: boolean
    isOriginalDefault?: boolean
    /** 16px, defined in css */
    defaultWidth?: string
    defaultHeight?: string
}

setOptions

Modify the default options

export declare function setOptions(newOptions: Options): void;

Typings

/** Global default options */
export interface Options {
    classPrefix?: string;
    isStroke?: boolean;
    isOriginalDefault?: boolean;
    /** 16px, defined in css */
    defaultWidth?: string;
    defaultHeight?: string;
}
export interface OriginalColor {
    type: 'fill' | 'stroke';
    color: string;
}
export interface IconData {
    width?: number | string;
    height?: number | string;
    viewBox: string;
    data: string;
    originalColors?: OriginalColor[];
    stopColors?: string[];
    [key: string]: unknown;
}
export interface Icon {
    name: string;
    data: IconData;
}
export interface Props {
    /** icon data */
    data?: Icon;
    width?: string | number;
    height?: string | number;
    scale?: string | number;
    /** icon direction */
    dir?: string;
    color?: string | string[];
    /** gradient stop colors */
    stopColors?: string[];
    title?: string;
    fill?: boolean;
    /** is use original color */
    original?: boolean;
    /** Replace content, usually replace color */
    replace?: (svgInnerContent: string) => string;
}
/** SvgIcon function result type */
export interface SvgIconResult {
    /** SVG content */
    path: string;
    /** viewBox */
    box: string;
    className: string;
    style: Record<string, string | number>;
}
/** set default options */
export declare function setOptions(newOptions: Options): void;
export declare function getOptions(): Options;
export declare function getPropKeys(): (keyof Props)[];
/** get svgicon result by props */
export declare function svgIcon(props: Props): SvgIconResult;

@yzfe/svgicon-gen

Run in the nodejs environment to generate the Icon object (The value of props.data)

import { OptimizeOptions } from 'svgo';
import { Icon } from './types';
export type SvgoConfig = OptimizeOptions;
/**
 * generate svgicon object
 * @export
 * @param {string} source svg file content
 * @param {string} filename svg icon file absolute path
 * @param {(string | string[])} [svgRootPath] svg icon root path, to calc relative path
 * @param {SVGO.Options} [svgoConfig] svgo config
 * @returns {Promise<Icon>}
 */
export default function gen(source: string, filename: string, svgRootPath?: string | string[], svgoConfig?: OptimizeOptions): Promise<Icon>;

TIP: You can directly use @yzfe/svgicon-gen to generate icon data in advance and save it as a js file, so that you don't need to load icons with @yzfe/svgicon-loader.

@yzfe/svgicon-loader

Load the SVG file as icon data (vue) or SVG icon component (react), the generated code can be customized

Loader options

export interface LoaderOptions {
    svgFilePath?: string | string[]
    /** load as a component */
    component?: 'react' | 'taro' | 'vue' | 'custom'
    /** custom code when load as a custom component */
    customCode?: string
    svgoConfig?: unknown
}

vite-plugin-svigon

Plugin options

export interface PluginOptions {
    svgFilePath?: string | string[]
    /** load as a component */
    component?: 'react' | 'vue' | 'custom'
    /** custom code when load as a custom component */
    customCode?: string
    svgoConfig?: SvgoConfig
    /** Svg files to be excluded, use minimatch */
    exclude?: string | string[]
    /** Svg files to be included, use minimatch */
    include?: string | string[]
    /** Match query which import icon with query string */
    matchQuery?: RegExp
}