Basic Usage

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" />

If your .svg isn't rendering properly, take a look at our SVG Preparation, and then Styling