Next.js Discord

Discord Forum

Using SVGs in TS files

Answered
American Crocodile posted this in #help-forum
Open in Discord
American CrocodileOP
I'm trying to use some SVGs in a page in appDir, but I get a TS error for my SVGs
32:18 Error: Unsafe assignment of ananyvalue. @typescript-eslint/no-unsafe-assignment

The SVGs are just pure SVG files that I export from a index.ts file. I use them with Next Image like this 

import { ArrowRight } from "@/icons/index";
...
  <Image
      src={ArrowRight}
      height={25}
      width={25}
      alt=""
    /> 
...

I know the SVG exists, but I have no idea how to type them. Do I have to write type definitions everywhere I use these SVGs? And what would those definitions be?
I've enabled SVGs for <Image>, from my next.config.js 
  dangerouslyAllowSVG: true,
  contentDispositionType: 'attachment',
  contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",


Using NextJS 13.4.9
Answered by Masai Lion
its a question, why don't you do like this <ArrowRight />
View full answer

2 Replies

American CrocodileOP
It seems like I can use svgr, but it also seems like svgr is dependent on Webpack. I'd much prefer to stick with things that allow me to upgrade to turbopack down the road
Answer