DOCSEARCHbyAlgolia
Submit Docs

svgicon Ecosystem

repository·master·Indexed 21 days ago

https://github.com/mmf-fe/svgicon

A comprehensive suite of tools for managing, processing, and rendering SVG icons in modern web applications. It supports Vue and React frameworks and provides advanced capabilities such as color/gradient support, animations, and simultaneous fill and stroke manipulation. The ecosystem includes core utilities (@yzfe/svgicon, @yzfe/svgicon-gen), framework components (@yzfe/vue-svgicon, @yzfe/react-svgicon), build tool loaders (@yzfe/svgicon-loader, vite-plugin-svgicon, @yzfe/vue-cli-plugin-svgicon), and utilities like @yzfe/svgicon-viewer and @yzfe/svgicon-polyfill.

Tokens
13.8K
Snippets
45
Records
73
Agent score
74%

What's inside svgicon

  1. Overview of the svgicon toolkit

    master
    The svgicon toolkit is a collection of packages designed to manage and render SVG icons across various JavaScript frameworks. It provides tools for loading SVG files as data or components, previewing icons, and handling advanced SVG features like gradients, animations, and color modifications.

  2. Overview of Svg Icon Packages

    master
    The svgicon ecosystem provides a suite of tools for managing, processing, and rendering SVG icons across various JavaScript frameworks. It supports advanced SVG features such as multiple colors (including gradients), simultaneous fill and stroke attribute manipulation, color modification, zooming, and animations. The ecosystem includes loaders for build tools like Webpack and specialized components for Vue and React.

  4. Supported frameworks and integration methods

    master

    The toolkit provides native support for several major frameworks:

    • Vue 2.x & Vue 3.x: Use @yzfe/vue-svgicon.
    • React (>= 16.8): Use @yzfe/react-svgicon.
    • Other Frameworks: You can write custom components for any other framework by leveraging the core @yzfe/svgicon package.
    • Taro: Use @yzfe/taro-svgicon.

  5. Advanced SVG features supported by svgicon

    master

    The toolkit supports several advanced SVG manipulation and rendering capabilities:

    • Color Management: Supports multiple colors (including gradients), original colors, and the ability to modify specific colors within an icon.
    • Attributes: Supports setting both fill and stroke attributes simultaneously.
    • Effects: Supports zoom and animation effects.

  7. Use svgicon in Vue 3.x

    master

    To use svgicon in a Vue 3.x project:

    1. Install dependencies: npm install @yzfe/svgicon @yzfe/vue-svgicon --save
    2. Register the VueSvgIconPlugin globally in main.ts and import the required CSS.
    3. Use the component in templates by passing either the imported icon data object or the SVG file path string.
    // main.ts
import { VueSvgIconPlugin } from '@yzfe/vue-svgicon'
import '@yzfe/svgicon/lib/svgicon.css'

// Global plugin registration
app.use(VueSvgIconPlugin, { tagName: 'icon' })
    <script setup lang="ts">
import arrowData from 'svg-file-path/arrow.svg'
</script>

<template>
    <div>
        <!-- Using imported data object -->
        <icon :data="arrowData" />
        <!-- Using direct file path (recommended with transformAssetUrls) -->
        <icon data="svg-file-path/arrow.svg" />
    </div>
</template>

  8. Generate a static HTML page for SVG icons

    master

    You can use @yzfe/svgicon-viewer to generate a static HTML page containing your SVG icons by using the -o flag to specify an output directory.

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

  9. Add TypeScript definitions for SVG components

    master

    When importing SVGs as components, TypeScript will not recognize the module by default. You must add a declaration module in a .d.ts file.

    For React: Use ReactSvgIconFC from @yzfe/react-svgicon.

    For Vue: Use typeof VueSvgIcon from @yzfe/vue-svgicon.

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

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

  10. Configure @yzfe/svgicon-loader for Webpack projects

    master

    To load SVG files as icon data in a Webpack project, install @yzfe/svgicon-loader as a development dependency and add it to your module rules.

    Key options:

    • svgFilePath: An array of paths to your SVG files.
    • svgoConfig: Custom SVGO configuration (set to null to use defaults).
    • component: Set to 'react' if you are using React to load SVGs as components.
    // 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',
                        }
                    }
                ]
            },
        ]
    }
}

  11. Generate icon data with @yzfe/svgicon-gen

    master

    The @yzfe/svgicon-gen package is designed to run in a Node.js environment. It is used to generate the Icon object (the value of props.data).

    Optimization Tip: You can use @yzfe/svgicon-gen to pre-generate icon data and save it as a .js file. This allows you to bypass the need for @yzfe/svgicon-loader at runtime, improving performance.

  12. Setup with vue-cli using @yzfe/vue-cli-plugin-svgicon

    master

    For Vue CLI projects, use the official plugin for automated configuration.

    1. Install: Run vue add @yzfe/svgicon. You will be prompted for the SVG file path, the global component tag name, and your Vue version.
    2. Manual Invoke: If the plugin isn't automatically triggered, run vue invoke @yzfe/svgicon.

    This process generates a .vue-svgicon.config.js file which configures @yzfe/svgicon-loader, webpack aliases, and transformAssetUrls.

    # Install and configure
vue add @yzfe/svgicon

# Or manual invocation if needed
vue invoke @yzfe/svgicon