Integrating Alibaba SVG Icons into a Vue 3 Project

After studying Express and MySQL, the author builds a backend system to consolidate the learned technologies and demonstrates how to incorporate SVG icons from Alibaba's icon library into the project.

SVG Icons

Since a page needs icons, the tutorial shows how to obtain icons from Alibaba's icon library and add them to the project.

Alibaba Icon Library

Navigate to the resource management section, create a new project, and set the required options. After creating the project, go to Alibaba's material library, select the needed icons, add them to the shopping cart, and then add the icons from the cart to the project.

Because the online icon link is no longer available, the icons are downloaded locally as a Symbol package.

The downloaded package is placed in src/assets/svg, unzipped, and only the iconfont.js file is kept. import './assets/svg/iconfont.js' This line is added to main.ts for global import.

Introducing the svg‑icon Plugin

In the src directory, create a plugin folder to store the SVG icon component.

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconClassName" :fill="color" />
  </svg>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  iconName: { type: String, required: true },
  className: { type: String, default: '' },
  color: { type: String, default: '#409eff' }
})
const iconClassName = computed(() => `#${props.iconName}`)
const svgClass = computed(() => props.className ? `svg-icon ${props.className}` : 'svg-icon')
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

The component is exported via index.ts:

import { App } from 'vue'
import SvgIcon from './index.vue'
export function setupSvgIcon(app: App) {
  app.component('SvgIcon', SvgIcon)
}

Register the plugin in main.ts:

import { setupSvgIcon } from './plugin/SvgIcon/index'
setupSvgIcon(app)

Use the component in a page:

<template>
  <div> Workbench Page </div>
  <svg-icon iconName="icon-bianjishuru" />
</template>

The SVG icon is displayed correctly.

Summary

By combining Express, MySQL, Vue 3, TypeScript, and Pinia, a backend system is created, and Alibaba's SVG icons are imported and used throughout the project.