### Install React dependencies

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Install the necessary svgicon and react-svgicon packages for React projects.

```bash
npm install @yzfe/svgicon @yzfe/react-svgicon --save
```

--------------------------------

### Install SVGIcon Viewer Globally

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/other.md

Install the SVGIcon viewer globally using Yarn for command-line access.

```bash
yarn global add @yzfe/svgicon-viewer
```

--------------------------------

### Install vite-plugin-svgicon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Install the Vite plugin for svgicon to load SVG files as icon data.

```bash
npm install vite-plugin-svgicon -D
```

--------------------------------

### Install Vue dependencies

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Install the necessary svgicon and vue-svgicon packages for Vue 2.x projects.

```bash
npm install @yzfe/svgicon @yzfe/vue-svgicon  --save
```

--------------------------------

### Install SVG Icon Viewer Globally

Source: https://github.com/mmf-fe/svgicon/blob/master/packages/svgicon-viewer/README.md

Install the package globally using npm for command-line access.

```bash
npm install -g @yzfe/svgicon-viewer
```

--------------------------------

### Install @yzfe/svgicon-loader

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Install the svgicon loader for Webpack to process SVG files as icon data.

```bash
npm install @yzfe/svgicon-loader -D
```

--------------------------------

### Meta JSON Configuration Example

Source: https://github.com/mmf-fe/svgicon/blob/master/packages/svgicon-viewer/README.md

Example of a meta.json file used to configure custom display names for SVG icons in the viewer.

```json
{
    "iconName": {
        "name": "icon display name"
    }
}
```

--------------------------------

### Install SVG Icon Viewer in Project

Source: https://github.com/mmf-fe/svgicon/blob/master/packages/svgicon-viewer/README.md

Install the package as a development dependency in your project using npm.

```bash
npm install  @yzfe/svgicon-viewer --dev
```

--------------------------------

### Install Vue dependencies (Vue 3.x)

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Install the necessary svgicon and vue-svgicon packages for Vue 3.x projects.

```bash
npm install @yzfe/svgicon @yzfe/vue-svgicon --save
```

--------------------------------

### Invoke SvgIcon Plugin Manually in Vue CLI

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

If the plugin is installed but not automatically invoked, use this command to manually add the necessary dependencies and configuration files.

```bash
vue invoke @yzfe/vue-cli-plugin-svgicon
```

--------------------------------

### Get Prop Keys for SVG Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/api/index.md

Retrieves an array of valid prop keys for SVG icons. Use this to understand the available attributes for icon customization.

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

--------------------------------

### Generate Static HTML Page

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/other.md

Generate a static HTML page for SVG icon preview by specifying an output directory.

```bash
svgicon-viewer ./src/assets/svg -o ./dist
```

--------------------------------

### Preview SVG Icons from Folder

Source: https://github.com/mmf-fe/svgicon/blob/master/packages/svgicon-viewer/README.md

Use the svgicon-viewer command to preview all SVG icons located in a specified folder.

```bash
svgicon-viewer ./svg/folder
```

--------------------------------

### Importing SVGs in Different Formats

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Demonstrates how to import SVG files as icon data, as a component (for Vue), or as a URL. Ensure correct import paths and query parameters are used based on the desired output.

```typescript
// import as icon data
import ArrowIconData from '@/assets/svg/arrow.svg'
import FaArrowIconData from '@/assets/font-awesome/arrow.svg'

// import as component
import ArrowIcon from 'svg-icon-path/arrow.svg?component'

// import as url
import ArrowSvgUrl from 'svg-icon-path/arrow.svg?url'
```

--------------------------------

### Preview SVG Icons with Metadata

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/other.md

Preview SVG files and include additional metadata from a meta.json file. The meta.json file can contain a 'name' field for icon descriptions.

```json
// meta.json demo
{
    "arrow": {
        "name": "箭头"
    }
}
```

```bash
svgicon-viewer ./src/assets/svg ./src/assets/svg/meta.json
```

--------------------------------

### Preview SVG Icons with Custom Display Names

Source: https://github.com/mmf-fe/svgicon/blob/master/packages/svgicon-viewer/README.md

Preview SVG icons from a folder and use a JSON configuration file to specify custom display names for the icons.

```bash
svgicon-viewe ./svg/folder ./meta.json
```

--------------------------------

### Configure SvgIcon Vue CLI Plugin

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

This configuration file sets up SVG file paths, the globally registered component tag name, SVGO options, path aliases, and asset URL transformations for the Vue CLI plugin.

```javascript
const path = require('path')
const svgFilePaths = ['src/assets/svgicon'].map((v) => path.resolve(v))
const tagName = 'icon'

module.exports = {
    tagName,
    svgFilePath: svgFilePaths,
    svgoConfig: {},
    pathAlias: {
        '@icon': svgFilePaths[0],
    },
    transformAssetUrls: {
        [tagName]: ['data'],
    },
    loaderOptions: {},
}
```

--------------------------------

### Require SVG Icon Polyfill

Source: https://github.com/mmf-fe/svgicon/blob/master/packages/svgicon-polyfill/README.md

Import the svgicon-polyfill package using require. This is typically done at the entry point of your application to enable the polyfill.

```javascript
require('@yzfe/vue-svgicon-polyfill')
```

--------------------------------

### Vue Component: Multicolor Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Illustrates setting multiple colors for an icon, applied in the order of path/shape.

```vue
<template>
  <svgicon :name="'vue'" :colors="['#35495e', '#41b883']" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### setOptions

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/api/index.md

Modifies the global default options for SVG icon generation.

```APIDOC
## setOptions

### Description
Modify the default options for SVG icon generation.

### Method
PUT

### Endpoint
/setOptions

### Parameters
#### Request Body
- **newOptions** (Options) - Required - An object containing the new global options to set.

### Request Example
```json
{
  "newOptions": {
    "defaultSize": "32px",
    "defaultColor": "#333"
  }
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating that options have been updated.
```

--------------------------------

### Configure Vite for svgicon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Configure vite.config.ts to use vite-plugin-svgicon, specifying include paths and the SVG file directory. Optionally configure for React component generation.

```javascript
// vite.config.ts
import { defineConfig } from 'vite'
import svgicon from 'vite-plugin-svgicon'

export default defineConfig({
    plugins: [
        svgicon({
            include: ['**/assets/svg/**/*.svg'],
            svgFilePath: path.join(__dirname, 'src/assets/svg'),
            // If you are using react, it is recommended to configure the component option for react and load the svg file as react components.
            component: 'react',
        })
    ]
})
```

--------------------------------

### Register VueSvgIcon plugin (Vue 3.x)

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Import and use the VueSvgIconPlugin in your main.ts file for Vue 3.x. Also import the necessary CSS.

```typescript
// main.ts
import { VueSvgIconPlugin } from '@yzfe/vue-svgicon'
// Import style
import '@yzfe/svgicon/lib/svgicon.css'
// Global component
app.use(VueSvgIconPlugin, {tagName: 'icon'})
```

--------------------------------

### Vue Component: Size

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Demonstrates setting the size of an icon. The default unit is pixels, and the default size is 16px.

```vue
<template>
  <svgicon :name="'size'" :size="'64px'" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Configure Webpack for svgicon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Configure webpack.config.js to use @yzfe/svgicon-loader. Specify the test and include paths for SVG files and optionally configure for React component generation.

```javascript
// webpack.config.js
{
    module: {
        rules: [
             {
                test: /\.svg$/,
                include: ['SVG file path'],
                use: [
                    'babel-loader',
                    {
                        loader: '@yzfe/svgicon-loader',
                        options: {
                            svgFilePath: ['SVG file path'],
                            // Custom svgo configuration
                            svgoConfig: null,
                            // If you are using react, it is recommended to configure the component option for react and load the svg file as react components.
                            component: 'react',
                        }
                    }
                ]
            },
        ]
    }
}
```

--------------------------------

### Configure Multiple SVG Paths

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Configure vite-plugin-svgicon to handle multiple SVG paths with different include patterns, match queries, and output paths. This allows for organizing SVGs from various sources.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import svgicon from 'vite-plugin-svgicon'

export default defineConfig({
    plugins: [
        svgicon({
            include: ['**/assets/svg/**/*.svg'],
            svgFilePath: path.join(__dirname, '../../packages/assets/svg'),
        }),
        svgicon({
            include: ['**/assets/svg/**/*.svg'],
            // macth:  xxx.svg?component
            matchQuery: /component/,
            svgFilePath: path.join(__dirname, '../../packages/assets'),
            component: 'vue',
        }),
         svgicon({
            include: ['**/assets/font-awesome/**/*.svg'],
            svgFilePath: path.join(
                __dirname,
                '../../packages/assets/font-awesome'
            ),
        }),
    ]
})
```

--------------------------------

### getPropKeys

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/api/index.md

Retrieves an array of all available prop keys for SVG icon generation.

```APIDOC
## getPropKeys

### Description
Get the key array of props.

### Method
GET

### Endpoint
/getPropKeys

### Parameters
#### Query Parameters
None

### Response
#### Success Response (200)
- **keys** (string[]) - An array of strings representing the available prop keys.
```

--------------------------------

### Register VueSvgIcon component globally (Vue 2.x)

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Import and register the VueSvgIcon component globally in your main.js file for Vue 2.x. Also import the necessary CSS.

```javascript
// main.js
import { VueSvgIcon } from '@yzfe/vue-svgicon'

// Import style
import '@yzfe/svgicon/lib/svgicon.css'
// Global component
Vue.component('icon', VueSvgIcon)
```

--------------------------------

### Import CSS for svgicon in React

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Import the svgicon CSS file to ensure proper styling of icons in your React application.

```typescript
import '@yzfe/svgicon/lib/svgicon.css'
```

--------------------------------

### Vue Component: Direction

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Demonstrates setting the direction of an icon. The 'dir' prop defaults to 'up'.

```vue
<template>
  <svgicon :name="'direction'" :dir="'right'" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Vue Component: Gradient Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Shows how to apply a gradient to an SVG icon.

```vue
<template>
  <svgicon :name="'gradient'" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Vue Component: Original Color Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Demonstrates using the original color attributes of an SVG icon.

```vue
<template>
  <svgicon :name="'color-wheel'" :original="true" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Configure Vite for React SVG Components

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Configure vite-plugin-svgicon to import SVG files as React components. Ensure your SVG files are located in the specified include path.

```typescript
import { defineConfig } from 'vite'
import svgicon from 'vite-plugin-svgicon'

export default defineConfig({
    plugins: [
        svgicon({
            include: ['**/assets/svg/**/*.svg'],
            svgFilePath: path.join(__dirname, 'src/assets/svg'),
            component: 'react',
        })
    ]
})
```

--------------------------------

### Vue Component: Reverse Color Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Shows how to use the r-color prop to reverse fill or stroke attributes on an icon.

```vue
<template>
  <svgicon :name="'clock'" :rcolor="true" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Vue Component: Replace SVG Content

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Shows how to replace the default SVG content using the 'replace' prop.

```vue
<template>
  <svgicon :name="'replace'" :replace="'<path d=\"M10 10 H90 V90 H10 Z\" />'" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Vue Component: Single Color Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Demonstrates the usage of a single color icon, which defaults to inheriting the font color.

```vue
<template>
  <svgicon :name="'clock'" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### svgIcon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/api/index.md

Generates SVG icon data based on the provided properties.

```APIDOC
## svgIcon

### Description
Generate icon data based on the incoming attributes.

### Method
POST

### Endpoint
/svgIcon

### Parameters
#### Request Body
- **props** (Props) - Required - An object containing properties for SVG icon generation. The structure of `Props` is detailed in the documentation.

### Request Example
```json
{
  "props": {
    "size": "24px",
    "color": "#000",
    "data": "<svg>...</svg>"
  }
}
```

### Response
#### Success Response (200)
- **data** (SvgIconResult) - The generated SVG icon data.

#### Response Example
```json
{
  "data": "<svg>...</svg>"
}
```
```

--------------------------------

### Add SvgIcon Plugin to Vue CLI Project

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Use this command to automatically configure SvgIcon for your Vue CLI project. You will be prompted for SVG file paths, component tag name, and Vue version.

```bash
vue add @yzfe/vue-cli-plugin-svgicon
```

--------------------------------

### Vue Component: Fill and Stroke

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Shows how to control the fill and stroke attributes of an icon. The 'fill' prop defaults to true.

```vue
<template>
  <svgicon :name="'fill'" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

```css
.svgicon-fill {
  fill: #41b883;
}
.svgicon-stroke {
  stroke: #35495e;
}
```

--------------------------------

### Configure Vite for Custom Vue SVG Components

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Configure vite-plugin-svgicon to generate custom Vue components using the 'custom' option and providing custom code. This allows for advanced rendering logic.

```typescript
import { defineConfig } from 'vite'
import svgicon from 'vite-plugin-svgicon'

export default defineConfig({
    plugins: [
        svgicon({
            include: ['**/assets/svg/**/*.svg'],
            svgFilePath: path.join(__dirname, 'src/assets/svg'),
            component: 'custom',
            customCode: "
                import Vue from 'vue'
                import { VueSvgIcon } from '@yzfe/vue-svgicon'

                export default {
                    functional: true,
                    render(h, context) {
                        return h(VueSvgIcon, {
                            ...context.data,
                            data: data
                        })
                    }
                }
            "
        })
    ]
})
```

--------------------------------

### Generate SVG Icon Data

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/api/index.md

Generates SVG icon data based on the provided properties. This is the core function for creating SVG icons.

```typescript
declare function svgIcon(props: Props): SvgIconResult;
```

--------------------------------

### Vue Component: Modify Original Gradient Colors

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/component.md

Explains how to modify original gradient colors when the 'original' prop is set to true.

```vue
<template>
  <svgicon :name="'gradient'" :colors="['#35495e', '#41b883']" :original="true" />
</template>

<script>
import svgicon from '@yzfe/vue-svgicon'

export default {
  components: {
    svgicon
  }
}
</script>
```

--------------------------------

### Use icon component in Vue 3.x template

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Use the 'icon' component in your Vue 3.x template, passing SVG data or file path. It's recommended to configure transformAssetUrls.

```vue
<script setup lang="ts">
import arrowData from 'svg-file-path/arrow.svg'
</script>
<template>
    <div>
        <icon :data="arrowData" />
        <!-- It is recommended to configure transformAssetUrls，. You can directly pass in the svg file path. -->
        <icon data="svg-file-path/arrow.svg" />
    </div>
</template>
```

--------------------------------

### Use icon component in Vue 2.x template

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Use the globally registered 'icon' component in your Vue 2.x template, passing SVG data or file path. It's recommended to configure transformAssetUrls.

```vue
<template>
    <div>
        <icon :data="arrowData" />
        <!-- It is recommended to configure transformAssetUrls，. You can directly pass in the svg file path. -->
        <icon data="svg-file-path/arrow.svg" />
    </div>
</template>
<script>
import arrowData from 'svg-file-path/arrow.svg'
export default {
    data() {
        return: {
            arrowData
        }
    }
}
</script>
```

--------------------------------

### Import SVG data in JavaScript

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Import SVG file data directly in your JavaScript code. The imported data contains the icon name and processed SVG content.

```javascript
import arrowData from 'svg-file-path/arrow.svg'
// {name: 'arrow', data: {width: 16, height: 16, ...}}
console.log(arrowData)
```

--------------------------------

### Use SVG icon component in React

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/index.md

Import an SVG file as a React component and use it in your JSX. The component accepts props like 'color' for customization.

```tsx
import ArrowIcon from 'svg-file-path/arrow.svg'

export default function FC() {
    return (
        <div>
            <ArrowIcon color="red" />
        </div>
    )
}
```

--------------------------------

### TypeScript Type Definitions for React Components

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Add type definitions for SVG files imported as React components to ensure proper type checking and autocompletion in your React project. This declaration should be placed in a .d.ts file.

```typescript
// react
declare module '@/assets/svg/*.svg' {
    import { ReactSvgIconFC } from '@yzfe/react-svgicon'
    const value: ReactSvgIconFC
    export = value
}
```

--------------------------------

### Generated Custom Vue Component Code

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

This is the code generated by vite-plugin-svgicon when the 'custom' component option is used with customCode. It includes icon data and Vue rendering logic.

```js
const data = {/*iconData*/}
import Vue from 'vue'
import { VueSvgIcon } from '@yzfe/vue-svgicon'

export default {
    functional: true,
    render(h, context) {
        return h(VueSvgIcon, {
            ...context.data,
            data: data
        })
    }
}
```

--------------------------------

### Set Global Options for SVG Icon

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/api/index.md

Modifies the default global options that affect the default values of SVG icon props. Call this function to customize default behaviors.

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

--------------------------------

### TypeScript Type Definitions for Vue Components

Source: https://github.com/mmf-fe/svgicon/blob/master/docs/guide/advanced.md

Add type definitions for SVG files imported as Vue components to ensure proper type checking and autocompletion in your Vue project. This declaration should be placed in a .d.ts file.

```typescript
// vue
declare module '@/assets/svg/*.svg' {
    import { VueSvgIcon } from '@yzfe/vue-svgicon'
    const value: typeof VueSvgIcon
    export = value
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.