Easy Using SVG on NextJS Typescript

Ariska HidayatAriska Hidayat
1 min read

Simple use svg on NextJS. this recommendation from me. you can use file svg on the public folder. but, you have difficulty changing color.

Convert image to svg using https://convertio.co/

step-step to use svg on NextJs:

  1. make file Icon.tsx
export default function Icon() {
  return (
// svg value
)

  1. change properties from kebab-case to camelCase

  2. change color to dynamic color

fill="currentColor"
  1. import icon
import Icon from '@/icons/Icon';
  1. use/implementation icon
<Icon/>

I hope this article is useful. thank

0
Subscribe to my newsletter

Read articles from Ariska Hidayat directly inside your inbox. Subscribe to the newsletter, and don't miss out.

SVGNext.jsNext.js 13.2TypeScripttips

Written by

Ariska Hidayat
Ariska Hidayat

I am an enthusiastic researcher and developer with a passion for using technology to innovate in business and education.