Support multiple js frameworks
Vue 2.x, Vue 3.x, React >= 16.8 icon components are provided by default, and components that support other frameworks can be written through @yzfe/svgicon
API
@yzfe/svgicon
Props
Parameters (attributes) of the function to generate SVG icon data
ts
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
ts
export declare function getPropKeys(): (keyof Props)[];svgIcon
Generate icon data based on the incoming attributes
ts
declare function svgIcon(props: Props): SvgIconResult;Options
Global options, affecting the default value of props
ts
/** 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
ts
export declare function setOptions(newOptions: Options): void;Typings
ts
/** 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)
ts
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-gento 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
ts
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
ts
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
+}