Introduction

Welcome to the svgMagic documentation. svgMagic is an open-source package designed to simplify the use of SVG code and .svg files in Next.js projects, with full Typescript and MDX support, providing seamless integration, enabling accessibility and creativity in both light and dark modes, while enhancing your development workflow.

The svgMagic logo, website, and open source package were designed, developed, released and maintained on GitHub. Available Now on npm and GitHub Packages.

For more information about the problems that svgMagic solves, as well as the alternative methods to employ accessible SVG artwork that exist, visit this Blog Post.

Getting Started

Managing .svg files in a web development environment can be challenging. svgMagic aims to streamline this process, making it easier to integrate SVG files directly into your Next.js projects. This documentation will guide you through getting started, configuring, and using svgMagic effectively.

Installation

1. To install svgMagic, run the installation command for the package manager of your choice in your project directory:

npm install svgmagic

user@system path %pnpm i svgmagic

2. Run the interactive svgm-setup interactive post-install script

svgm-setup

For detailed installation instructions, visit the Installation page.

Prerequisites

For information on preparing your .svg file and SVG code for use with SVGM to dynamically apply CSS styles like currentColor, see Basic Styling

Ensure SVGR is Installed

SVGM uses SVGR to transform svg into React components. SVGR is a peer dependency and should be installed automatically. If not, you can install it manually:

 npm install @svgr/webpack

Configure SVGR in Next.js

Add the following configuration to your next.config.js to enable SVGR:

module.exports = {
    webpack(config) {
        config.module.rules.push({
            test: /.svg$/,
            use: ['@svgr/webpack'],
        });
        
        return config;
    },
};

Basic Usage

Here's a quick example of how to use svgMagic in Typescript

import SVGM from "../svgm/SVGM"

<SVGM kind="svgm"/>

import React from 'react';
import SVGM from "@/components/svgm/SVGM"; 

const ExampleComponent = () => (
<div>
<SVGM kind="svgm-mark" className="h-8 w-8 text-white" />
</div>
);
            
export default ExampleComponent;

That's it! One import, one line of code, and you're set, change it as you see fit - no extra configuration steps required.

• To change the .svg file being rendered, simply change the kind property to another file name in your directory.

Let's not forget about MDX, here's the SVGM.tsx component in an .mdx document, after importing it into your mdx-components.

---
title: svgMagic Documentation
---
<SVGM kind="example-icon" className="h-8 w-8 text-current" />

For more usage examples and detailed information, visit the Usage page. For styling examples using TailwindCSS, visit the Styling page.

Contributing

Contributions are open to svgMagic. If you have suggestions, improvements, or bug fixes, please submit a Pull Request on GitHub

Sponsors and Donations

svgMagic is a sole development effort and an open source project. If svgMagic helped you, please consider donating to support ongoing development efforts!

Websites Built with svgMagic

Creative Imaging Services uses SVGM in nearly every implementation of graphics and SVG on it's website, showing what's possible with this package.

Your website here! I look forward to seeing what you build with svgMagic! This website is powered by it and it has been an indispensable tool in staying organized and efficient.

Additional Resources

Thank you for using svgMagic. I hope this documentation helps you get the most out of the package. Happy coding!

If you have any suggestions or feedback, please let me know!

Sponsors and Donators