#Using SVGs in TS files

4 messages · Page 1 of 1 (latest)

opal lotus
#

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 an any value. @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

potent juniperBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)
opal lotus
#

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

eternal phoenix