Skip to content

Icons, Figma and SVG

Jump to bottom
David edited this page Aug 20, 2024 · 1 revision

You can export svg from figma and paste it into a .svg file in assets/svg to create icons

In figma, select the icon that you want to export. Go through the layers to get just the icon with the smallest possible box around it. The right-click, "Copy/Paste As", "Copy as SVG".

Then open a file in assets/svg and save the content there.

For example assets/svg/trash-can.svg

<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 6.58661H5H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 6.58661V4.58661C8 4.05618 8.21071 3.54747 8.58579 3.1724C8.96086 2.79732 9.46957 2.58661 10 2.58661H14C14.5304 2.58661 15.0391 2.79732 15.4142 3.1724C15.7893 3.54747 16 4.05618 16 4.58661V6.58661M19 6.58661V20.5866C19 21.117 18.7893 21.6257 18.4142 22.0008C18.0391 22.3759 17.5304 22.5866 17 22.5866H7C6.46957 22.5866 5.96086 22.3759 5.58579 22.0008C5.21071 21.6257 5 21.117 5 20.5866V6.58661H19Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 11.5866V17.5866" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 11.5866V17.5866" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

This project will automatically convert the files in assets/svg into react.js files in app/svgr on install. After you add a new file you can manually trigger the conversion with:

npm run svgr

Then you can use these svg files as React components in your code like this:

import TrashCan from '../svgr'

function renderSomething(){
    return <SvgTrashCan />
}

When copying the svg code out of figma, it is important to drill all the way down until you just get the figure and now padding around it.

There is a Show Icons story in Storybook, that shows all the icons in the project.
image

The green border shows the outline around the figure. Make sure the green box touches the figure on all four sides - or it will be hard to place and scale the component in different uses. I wish there was an easier way to get figma to just export it right.

Occasionally, it's necessary to edited the file in assets/svg to tweak the viewBox dimensions to get it exactly right. After you do, you will have to re-run npm run svgr to update the component. (but you can do it from another terminal window and leave storybook running)

One way to do this is to run storybook and go to the http://localhost:6006/?path=/story/show-icons--normal

Click on the icon you are interested in, and open the Chrome developers console, and select the icon.

In the example below, the viewBox was 0 0 24 24 before I tweaked it.

image

After you get it right through chrome, go to assets/svg and edit the file and change the view box there. Then npm run svgr (from a separate terminal window than storybook) and you should see that it gets updated.

Clone this wiki locally