Importing SVGs

[davewhitley]

I noticed that this was in the rollup config file

import svg from 'rollup-plugin-svg';

But I want to import svg files in the code.ts file. Doesn't this allow me to import svg files in .ts files, or only in .svelte files? What could I do to enable importing svg files in code.ts?

Ultimately I want the user to click a button in a Figma plugin, and an icon appears on the canvas.

Thanks!

[thomas-lowry]

I’d have to take a look. Generally the import svg function is just to enable svgs in the plugin UI so that they get inlined (since you can’t import external resources into a plugin). All it does is insert the svg string. I haven’t tried it with the typescript file yet. What are you trying to do?

[davewhitley]

Thanks for the quick reply. Here's an example of what I'm trying to do.

In my plugin, there is a button that creates an element and places it on the canvas. For example, the button can create a row of tabs. In addition to text for each tab, there should also be an icon.

So, in code.ts I want to import the icon that will be shown on each tab:

import icon from './assets/icon.svg';

And then use that icon when the tab is created:

let frame = figma.createFrame();
frame.name = 'Tab';

let tabIcon = figma.createNodeFromSvg(icon);
frame.appendChild(tabIcon);

*isn't the actual code I'm using, just a demonstration

I'm trying to find a clean way of doing this, and ideally having a folder of icon files that I can import.