How can I include .svg files in build? #811
Replies: 3 comments 4 replies
-
|
CC @egoist |
Beta Was this translation helpful? Give feedback.
-
|
@danigalvez did you find any solution? |
Beta Was this translation helpful? Give feedback.
-
|
@flavioms I would just transform them in SVGR playground and save as react components. |
Beta Was this translation helpful? Give feedback.
-
|
I ended up running into this and figuring it out – turns out the import { defineConfig } from 'tsup'
import svgr from 'esbuild-plugin-svgr'
import jsx from '@svgr/plugin-jsx';
export default defineConfig({
esbuildPlugins: [svgr({ svgo: false, plugins: [jsx] })],
});I figured it out by checking out how the |
Beta Was this translation helpful? Give feedback.
-
|
It outputs something like this, so if you are a TS user, here is a import * as React from "react";
const SvgCheck12 = props => <svg width={12} height={12} viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" {...props}><path fillRule="evenodd" clipRule="evenodd" d="M11.7071 1.79289C12.0976 2.18342 12.0976 2.81658 11.7071 3.20711L4.70711 10.2071C4.31658 10.5976 3.68342 10.5976 3.29289 10.2071L0.292893 7.20711C-0.0976311 6.81658 -0.0976311 6.18342 0.292893 5.79289C0.683417 5.40237 1.31658 5.40237 1.70711 5.79289L4 8.08579L10.2929 1.79289C10.6834 1.40237 11.3166 1.40237 11.7071 1.79289Z" /></svg>;
export default SvgCheck12;// svgr.d.ts
declare module '*.svg' {
import { ComponentPropsWithRef } from 'react'
export default (props: ComponentPropsWithRef<'svg'>) => JSX.Element
} |
Beta Was this translation helpful? Give feedback.
-
|
Reviving an old thread here, I realize, but I tried this and I'm getting an error from the esbuild plugin: It looks like now the jsx plugin is passing jsx into the esbuild plugin, which is again running it through svgr? Not sure what's happening here! |
Beta Was this translation helpful? Give feedback.
-
|
This seems to work #570 (comment) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I have a component that dynamically imports SVGs, so I'll need to be able to include these SVGs within the build. How can I do this?
Here's what I've tried:
I've scoured the internet to no avail, everythign leads me to webpack and rollup material. I'd love to stay with
tsup, however.Beta Was this translation helpful? Give feedback.
All reactions