Uncomplicating SVG in Next.js
Tags: webdev, nextjs, tutorial, frontend
Published: 2024-05-20 18:47:01


![svgmagic.dev Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m2i3qo7jr7nf5n02scb.png)

## Simplify Your SVG Workflow with svgMagic

SVGs are a vital part of modern web development, offering scalability and crisp visuals. However, integrating and managing them can sometimes be challenging. That's where svgMagic comes in, providing an efficient solution for incorporating SVGs into your Next.js projects.

## What is svgMagic?

svgMagic is a powerful tool that streamlines SVG and simplifies the process of adding, replacing and styling SVGs. With the power of Next.js, TailwindCSS, and MDX, we can create phenomenal stylized vector graphics anywhere in our app easily.

### Key Features

- **Easy Installation**: Get started quickly with npm, Yarn, or PNPM.
- **Pre-built Components**: Use pre-loaded SVGs or import your own.
- **Styling Options**: Customize SVGs with Vanilla CSS or Tailwind CSS.
- **Dynamic Management**: Handle SVGs dynamically within your projects.

## Getting Started with svgMagic

Let's walk through the steps to integrate svgMagic into a Next.js project.

## Installation

First, install svgMagic using your preferred package manager:

```bash
npm i svgmagic
# or
yarn add svgmagic
# or
pnpm i svgmagic
```

### Prerequisite Configurations

This should add SVGR as a peer dependency and install it if it isn't already, but, just in case - you can check your package.json or install it.

```bash
npm i @svgr/webpack
# or
yarn add @svgr/webpack
# or
pnpm i @svgr/webpack
```

Next, ensure SVGR is your loader in your `next.config.js` file.

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

### Setup Script

Lastly, run the `svgm-setup` script.

```bash
svgm-setup
```

And choose whether to scaffold the example `.svg` files, and change the directory if you want to. 

All of the `.svg` files in the subdirectory containing the scaffolded `SVGM.tsx` component will be automatically loaded going forward by their file name.

For deeper installation instructions, styled live examples, and detailed documentation, visit the [svgMagic](https://svgmagic.dev) home page.

## Using svgMagic in a Parent Component

```jsx
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;
```

If you want to use it in MDX and pass the props right there, it works great, just ensure it gets imported with your `mdx-components`.

### Customizing SVGs with Tailwind CSS

svgMagic supports Tailwind CSS, allowing you to easily style your SVGs:

```jsx
<SVGM kind="example-icon" className="w-6 h-6 text-blue-500" />
```

This code applies width, height, and color classes from Tailwind CSS to the SVG.

This means we can target things like dark mode with `dark:`, too. For more examples, visit https://svgmagic.dev

## Conclusion

svgMagic is an excellent, _free_, and **open source** tool for managing SVGs in your web projects, offering easy integration, customization, and dynamic handling. Whether you're building with Next.js or another framework, svgMagic can simplify your SVG workflow.

Explore more about svgMagic and start integrating it into your projects today!

{% cta https://github.com/brohvis/svgmagic %} Star on GitHub {% endcta %}

---

### Relevant Links
- [Homepage](https://svgmagic.dev/docs)
- [Documentation](https://svgmagic.dev/docs)
- [GitHub](https://github.com/brohvis/svgmagic)
- [npm](https://www.npmjs.com/package/svgmagic)
- [Product Hunt] (https://www.producthunt.com/posts/svgmagic)
- [Sponsor svgMagic] (https://github.com/sponsors/brohvis)

---