Ignacio Zsabo

How use SVG icons on SolidJS thumbnail

How use SVG icons on SolidJS

3 minutes of read
SolidJS
SVG
Icons

SolidJS is a powerful Javascript library for building frontend applications, you can use it for general purpose frontend development or create desktop applications with Electron (Soon a article about this), also working with SVG in SolidJS could be tricky at the beginning.

The next post i intend to show you how to use SVG Icons in SolidJS without friction, because this framework is new and it is becoming a trend very quickly it’s interesting to know how to deal with things like this.

Import SVG file

As you may have noticed if you started a new project using npx degit solidjs/templates/js my-app the imported file is used in the src property of an img tag but if you try to instantiate this imported file as a component you will receive a Uncaught TypeError: Comp is not a function in your browser console.

This is because Vite by default does not allow using an imported SVG file as a component, for this we can use a library created by chempogonzalez for this purpose and that can be used with SolidJS.

Installing using your favorite node package manager, in my case i will use yarn:

yarn add vite-plugin-svgr-component -D

Once this development dependency is installed, we go to our vite.config.js file in which we will make the following changes.

At the beginning of the file we are going to add this import:

import SVGInjectPlugin from "vite-plugin-svg-inject";

Since we are using Solid, the plugin must be in the plugin key, next to it we must place the one we just installed:

export default defineConfig({
  plugins: [solidPlugin(), SVGInjectPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

Once we have done this we will be able to use our imported SVG as a JSX component, so we can pass props as a normal component for example height:

<Logo height="54px" />

The component is resized as expected:

Create a component with the SVG file

This step would be as manual as possible to get our SVG component, first of all we need our SVG icons you can use different sites to get it, in my case I will use https://www.svgrepo.com, once we have our SVG file you can open it with a code editor and copy its content and paste it into our component that we are going to create, we return our SVG that we downloaded as follows:

Our SVG component should look something like this:

export default function LogoComponent(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 166" {...props}>
      ...
    </svg>
  );
}

We import our component from the route where we have created it:

import LogoComponent from "./assets/LogoComponent";

And we use it in our JSX in the same way as we used our file in the previous example:

<LogoComponent height="54px" />

Using this way our component maintains its reactivity to prop changes despite making a spread on the component props.

Icon packs for SolidJS

Using icon packs can be the easiest and most reliable option to handle icons within your application, since SolidJS is a relatively new library there aren’t that many options in the community to address all use cases, but this community is having a fairly healthy and rapid growth.

Solid Heroicons

To use this library, the first thing to do would be to install it with your favorite package manager, in my case i will use yarn:

yarn add solid-heroicons

Once installed you can use it in your component as follows

import:

import { Icon } from "solid-heroicons";
import { adjustments } from "solid-heroicons/solid";

JSX declaration:

<Icon path={adjustments} />

This would be all, now you can import all the icons supported by this library.

Solid Icons

One option that covers more icon packs available in the community is Solid Icons which has been created with the purpose of being the out-the-box option for using SVG icons in SolidJS.

Like the heroicons option, we are going to use our favorite package manager to install it:

yarn add solid-icons

If we do not know which icon we are going to import, we have at our disposal an Icons Explorer designed for this purpose.

Once we know which icon best suits what we are looking for, we can import it as follows:

import { BiCompass } from "solid-icons/bi";

And we can use it in our JSX like this:

<BiCompass size={24} color="#000000" />

Components imported from solid-icons are reactive, meaning that if your props change your icon will have no problem reacting to these changes:

<BiCompass size={isBig() ? "150px" : "50px"} color={customColor()} />

It should be noted that this library recently added support for SSR if you are using solid-start, which although it is still in its early stages, looks very promising.

Finaly words

As you can see, the SolidJS community is growing at a good pace and there are more of us who decided to take the leap and use it for our projects, in the following months I will be writing about my adventure with this framework and how fantastic its community has been, i hope you have been useful and see you!

I would not like to leave out the libraries that although not dedicated to SolidJS, also work for this purpose, such as:

unplugin-icons have an controller thats allow to use it in SolidJS but need configuration for being work.