New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Create SVG Sprite File

Are you looking for a simple way to create an SVG sprite file for your web development projects? Look no further! In this article, I will guide you through the process of creating an SVG sprite file.

Create SVG Sprite File
Create SVG Sprite File

Create SVG Sprite File

Install the Package

To begin, install the required package by running the following command:

npm install -g svg-sprite-generator

Once the installation is complete, update the package.json file. In this example, I will be using Parcel and Yarn. Add the following line to your package.json:

"make-sprite": "svg-sprite-generate -d src/svg -o src/images/sprite.svg",

After updating the package.json file, it should resemble the following:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel",
    "make-sprite": "svg-sprite-generate -d src/svg -o src/images/sprite.svg",
    "build:parcel": "parcel build --no-content-hash --no-source-maps",
    "build": "npm run build:parcel"
},

Creating the SVG Sprite

As indicated in the command above, create a folder named “svg” and copy your SVG files into that folder:

|-- src
    |-- svg

Once you have copied and pasted your SVG icons into the folder, run the command yarn make-sprite (assuming you are using Yarn). If done correctly, a new file named “sprite.svg” will be created in the “src/images” directory.

How to Use the SVG Sprite

To use the SVG sprite file, copy the code from “sprite.svg”:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="trash" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round"
			d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />

	</symbol>
	<symbol id="x-circle" viewBox="0 0 24 24">
		<path stroke-linecap="round" stroke-linejoin="round"
			d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
	</symbol>
</svg>

In the example above, the “sprite.svg” file contains two SVG symbols for the trash and x-circle icons. Copy this code into your HTML file to use the SVG sprite:

<body>
	<div class="hidden">
		<?xml version="1.0" encoding="utf-8"?>
		<svg xmlns="http://www.w3.org/2000/svg">
			<symbol id="trash" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round"
					d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />

			</symbol>
			<symbol id="x-circle" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round"
					d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
			</symbol>
		</svg>
	<div>

To use each individual SVG, simply call the ID of the corresponding SVG symbol. Here is an example:

<div class="w-[1rem] h-[1rem]">
	<svg class="w-full">
		<use xlink:href="#trash"></use>
	</svg>
</div>

I hope this article has provided you with a helpful guide on creating an SVG sprite file. Feel free to explore more of my articles for additional insights and tips. Happy coding!

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment