---
title: "SVG & SVG Sprite Integration in Vue - Practical Notes"
description: "How to integrate SVG and SVG Sprite in a Vue project using svg-sprite-loader and svgo to optimize icon loading performance, with a complete SvgIcon component implementation."
canonical_url: "https://blog.markkulab.net/en/post/svg-and-svg-sprite"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/en/author/mark-ku"
site: "Mark Ku's Tech Notes"
date_published: "2021-10-16 01:01:01 +0800"
category: "Frontend"
tags: ["vue", "svg", "svg-sprite", "webpack", "frontend", "icon"]
language: "en"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "when reusing or quoting, credit the author and link back to the original"
---

# SVG & SVG Sprite Integration in Vue - Practical Notes

## Why Use SVG & SVG Sprite?

* When a browser scales a raster image, it becomes blurry and pixelated.
* Loading dozens of tiny icons as separate HTTP requests puts pressure on the server and slows down the page. Combining them reduces the number of requests and speeds up load time.

## What Is SVG?

Open an SVG file in a text editor and you'll see that it stores paths and colors as text, structured very much like HTML — a tree of tags and attributes. Because of this, the same graphic can be scaled to any size without losing quality.

![Syntax-highlighted SVG code defining paths, filters, and gradients](https://blog.markkulab.net/content/markku/posts/svg-and-svg-sprite/images/WSiwJ4v.png)

## Pros and Cons

### Pros

1. No pixelation — vector-based, scales cleanly at any size
2. Text within the image is selectable and copyable
3. Colors can be changed via CSS

### Cons

1. File size is slightly larger than raster equivalents (best suited for simple icons)
2. Not supported in older browsers (e.g., IE 11)

## Ways to Load SVG Sprite in a Website

### Method 1 — CSS Sprite: combine icons into one image and use `background-position` to show each one

```
.icon-match-event-3 {
  width: 24px;
  height: 24px;
  zoom: 0.8;
  background-position: -28px -4px;
  background-repeat: no-repeat;
  background-thumbnail: url(~@/assets/images/icon/match-event/match-event.svg);
}
```

### Method 2 — Inline SVG Sprite: merge all SVG paths into a single `<svg>` element rendered in the HTML, and switch icons via `:xlink:href=#targetId`

![SVG code snippet defining multiple icons within a sprite](https://blog.markkulab.net/content/markku/posts/svg-and-svg-sprite/images/MP38l0l.png)

```
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="`#${svgId}`" />
  </svg>
```

## Special SVG Behaviors to Know

1. When SVGs are loaded, the CSS `display` defaults to `none` — they won't appear on the page unless you explicitly set a `display` value. [MDN SVG display attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display)
2. When the page is zoomed, SVGs can escape the normal document flow. DevTools may not reflect the zoomed dimensions accurately.
3. SVG files are plain text and can be opened and edited in any text editor — the structure is HTML-like.
4. **Compressing SVG file size**: drawing tools often produce SVGs with many unused attributes that bloat file size. A webpack plugin can strip these. Example: [vue-svgo-loader](https://github.com/monster1935/vue-svg-icon?fbclid=IwAR13ww3-w6apMINVi9SFmuEW0J6Ud46dcqkbsuQLDaLcwgqPvmmTEfC-kp4)

---

## Simplifying SVG Loading in a Vue Project

To use icons as conveniently as icon fonts, we use an SVG loader.

### Install

```
npm install svg-sprite-loader --save-dev
npm install svgo svgo-loader --save-dev
```

### Update `vue.config.js`

```
chainWebpack: (config) => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/images/svg-icon'))
      .end()

    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/images/svg-icon'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
        extract: true,
        outputPath: 'static/img/',
        publicPath: 'static/img/',
        spriteFilename: 'main.svg'
      })
      .end()
      .use('svgo-loader') // 最佳化 svg (優化寫法及移除不需要的 attibute , 約可以減少30% 以上的圖檔大小)
      .loader('svgo-loader')
      .end()

    config.plugin('svg-sprite') // extract: true 才需要
      .use(require('svg-sprite-loader/plugin')) 
}
```

### Create the `SvgIcon` Vue Component

```
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="`#icon-${iconName}`" />
  </svg>
</template>

<script>

export default {
  name: 'SvgIcon',
  props: {
    iconName: {
      type: String,
      default: '',
      required: false
    }
  },
  data: function() {
    return {

    }
  },
  computed: {
    svgClass() {
      if (this.iconClass) {
        return 'svg-icon ' + 'icon-' + this.iconClass
      } else {
        return 'svg-icon'
      }
    }
  }

}
</script>

<style>
.svg-icon {
  display: inline-block;
  overflow: hidden;
  width: 32px;
  height: 32px;
  fill: currentColor;
}
</style>

```

### Load `main.svg` in the Root App Component

```

<template>
  <div>
    <Layout id="app" />
    <span v-if="htmlSvgString.length" v-once id="mainSvg" v-html="htmlSvgString" />
  </div>
</template>

<script>
import Layout from '@/views/layout'
export default {
  components: { Layout },
  data: function() {
    return {
      htmlSvgString: ''
    }
  },
  created() {
    const that = this
    fetch('./static/images/main.svg')
      .then(r => r.text())
      .then(text => {
        that.htmlSvgString = text
      })
  }
}
</script>


<style lang="scss">
#mainSvg {
  position: absolute;
  width: 0;
  height: 0;

  svg {
    position: absolute;
    width: 0;
    height: 0;
  }
}

// 如果要改色，要指定id，原本的顏色會掉，會吃父層的顏色
 #icon-dropdown_b {
   path {
     fill: currentColor;
   }
 }
</style>
```

### Register Globally in `main.js`

```
import SvgIcon from '@/components/SvgIcon'
Vue.component('Icon', SvgIcon)

// 引入至 web pack 
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('@/assets/images/svg-icon', true, /\.svg$/)
requireAll(req)

```

### Place Your SVG Files in the `svg-icon` Folder

### Usage in Templates

```
// icon-name 填入 icon 的檔案名稱
<SvgIcon :icon-name="getIconFileName(tab)" class="tab-icon" />
```

## Additional Notes

1. If you can't change an SVG's color, check whether the inner `<path>` elements have a hardcoded fill color — change it to `currentColor`:

```
 #icon-dropdown_b {
   path {
     fill: currentColor;
   }
 }
 ```

2. To bundle icons into multiple sprites organized by subfolder, see [Generating Multiple Sprites](https://github.com/JetBrains/svg-sprite-loader/issues/320?fbclid=IwAR3XvehC1QER7s4S9F8FGKjjv1dv5d_tfOE6sHWZ9_ElPUeh-5XP2W7NC84).
3. Icon fonts only support single colors. You can upload SVG files to [IcoMoon](https://icomoon.io/) to generate an icon font.
4. Windows Explorer cannot preview SVG files by default. Install [svg-explorer-extension](https://github.com/tibold/svg-explorer-extension/releases) to enable previews.

---

## About this article and its author

Originally published on [Mark Ku's Tech Notes](https://blog.markkulab.net/en/post/svg-and-svg-sprite)

License: [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — when reusing or quoting, credit the author and link back to the original

### About the author

**[Mark Ku](https://blog.markkulab.net/en/author/mark-ku)** — Software Solution Provider

- 10+ years senior software engineer, now an AI Builder
- Focused on large-platform architecture — North-American e-commerce, AI SaaS subscription billing
- Combining AI Agents and automation to build evolvable product foundations

### Free tools built by the author

All of these are free to use:

- [Free PDF Sign Tool](https://blog.markkulab.net/en/tools/pdf-sign): Online PDF sign tool — draw, type, or upload a signature, then drag, resize, and download. Everything runs in your browser; nothing is uploaded.
- [VS Code Refactory](https://blog.markkulab.net/en/tools/refactory): Refactory is a VS Code refactoring extension: 34 actions plus a 37-rule code-smell inspection layer with a Code Health dashboard, across 18 languages, backed by 534 tests. It learns your repo's conventions: where interfaces live, where DI is registered, whether 'use client' belongs. It ranks files by git churn × complexity so you know what to fix first, and hands any smell to the Claude Code already on your machine. Free to use, and your source never leaves your computer.
- [DB-Kit Database Manager](https://blog.markkulab.net/en/tools/db-kit): DB-Kit is a lightweight, cross-platform database manager built with Tauri + Rust + React. Manage MySQL, MariaDB, PostgreSQL, SQL Server, Oracle, SQLite, MongoDB, Redis, Kafka, Elasticsearch and RabbitMQ from one consistent interface: passwords encrypted in the OS keychain, SSH tunnels, full CRUD, a visual query builder, stacked multi-statement result sets, cross-connection data transfer and compare/sync, Excel / CSV import & export, visualized execution plans, ER diagrams, scheduled backups, SQL stress testing with p50–p99 latency percentiles, a 15-rule SQL review engine, Kafka message browsing with monitoring & alerts, a bilingual UI (Traditional Chinese / English), a built-in AI assistant (natural-language SQL, AI review and tuning advice) and the dbk CLI. Free and open source (MIT), with installers for Windows, macOS and Linux.
- [VS Code Super Mermaid](https://blog.markkulab.net/en/tools/super-mermaid): Super Mermaid is a VS Code extension for beautiful Mermaid diagrams out of the box: auto-colored live preview, mouse pan & zoom, high-res PNG / SVG export, 21 templates and multiple themes. Free and open source (MIT).
- [React Super Mermaid](https://blog.markkulab.net/en/tools/react-super-mermaid): react-super-mermaid is an open-source React component library: render beautiful Mermaid diagrams with a single <MermaidViewer>, with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT).
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace.
- [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is.
- [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT).
- [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT).
- [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students

### Daily podcasts

- [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml
- [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml

### Newsletter

[Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.