Uncomplicating SVG in Next.js

Travis Swavely — Mon, 20 May 2024 18:47:01 +0000

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:

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.

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.

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

        return config;
    },
};

Setup Script

Lastly, run the svgm-setup script.

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 home page.

Using svgMagic in a Parent Component

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:

<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.org

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!

Star on GitHub

DEV Community: Travis Swavely