Inline SVG elements

[devinhalladay]

Hi! I've followed the docs for importing image assets (in this case an svg file) but I'm still having trouble. What I'm trying to achieve is import IconName from './assets/icon.svg but so far I've only been able to output a base64 string. Is this an issue with this package, or Preact?

I've tried adding the following type definitions to no avail:

// attempt #1
declare module '*.svg' {
  const content: any;
  export default content;
}
// attempt #2
declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

Is there a built-in way for me to import SVGs and render as inline components? I tried using preact/compat as well; I'm wondering if maybe the switch to esbuild from webpack could be causing this issue?

[devinhalladay]

Edit: One further question is whether esbuild customizations (like defining a plugin to import SVG as components, such as esbuild-plugin-svgr) should be defined in build-figma-plugin.main.js or build-figma-plugin.ui.js

[devinhalladay]

I did some more digging and it looks like this is specified in the default build-figma-plugin.ui.js config:

create-figma-plugin/packages/build/src/utilities/build-bundles-async/build-bundles-async.ts

Line 116 in 2562363

'.svg': 'dataurl'

Anyone have tips on how to change this loader so that I can render the SVGs inline as components? I can't get { plugins: []} to work for some reason either…I'm unable to use import or require statements inside of build-figma-plugin.ui.js

[devinhalladay]

Ok one more update: I took a look at various esbuild plugins and strategies for loading inline SVGs as component imports, but none of them are working. I think this would be a great feature to support in the library, but I'm not experienced enough with esbuild to know how to add the feature.

[yuanqing]

@devinhalladay – Thanks for the detailed report, it really helps with understanding the issue you’re facing!

1. Your best bet would be to write your SVG as a “regular” Preact component in a .tsx file. This should work out-of-the-box without any overriding of the esbuild configuration. Would that work for your use case?
2. If your SVG asset is a simple asset comprising just a single path, you can also use the createIcon function from the @create-figma-plugin/ui package. This function is called by all the icon components in @create-figma-plugin/ui.

Edit: One further question is whether esbuild customizations (like defining a plugin to import SVG as components, such as esbuild-plugin-svgr) should be defined in build-figma-plugin.main.js or build-figma-plugin.ui.js

SVGs go in the generated build/ui.js UI bundle, and the build-figma-plugin.ui.js file is for overriding the esbuild configuration for the UI bundle. build-figma-plugin.main.js is for the build/main.js bundle.

[devinhalladay]

That's really helpful info, thank you @yuanqing! And thanks for this library in general — it's been so helpful and I'm using it to build this.

I'm going to go ahead and just create regular components for my icons. I might try out the createIcon function in the future but for now a Preact component will suffice!

Thanks again :)