API

@yzfe/svgicon

Props

生成 SVG 图标数据函数的参数（属性）

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

获取 props 的 key 数组

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

svgIcon

根据传入的属性生成图标数据

declare function svgIcon(props: Props): SvgIconResult;

Options

全局配置，影响 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

修改默认选项

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

在 nodejs 环境中运行，生成 Icon 对象 (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: 你可以直接使用 @yzfe/svgicon-gen 预先生成图标数据，保存为 js 文件，这样可以不用 @yzfe/svgicon-loader 加载图标了。

@yzfe/svgicon-loader

将 SVG 文件加载成图标数据(vue)或者 SVG 图标组件(react), 可以自定义生成的代码

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
}