vite+vue3項目中svg圖標組件封裝的過程詳解

更新時間：2024年03月18日 09:59:45 作者：慢慢雨夜

這篇文章主要介紹了vite+vue3項目中svg圖標組件封裝的過程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、安裝插件

npm i vite-plugin-svg-icons -D

二、插件配置

// vite.config.js
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";
export default defineConfig({
  plugins: [
    // svg圖標配置項
    createSvgIconsPlugin({
      // 指定需要緩存的圖標文件夾
      iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    }),
    // ------ 其他配置項 ------
  ],
});

三、引入注冊腳本

// src/main.js
import 'virtual:svg-icons-register'

四、封裝組件

在src/components目錄下創(chuàng)建一個SvgIcon.vue文件

// src/components/SvgIcon.vue
<template>
    <svg aria-hidden="true" :style="{
        width: width + 'px',
        height: height + 'px'
    }">
        <use :xlink:href="symbolId" rel="external nofollow"  :fill="color" />
    </svg>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
    prefix: {
        type: String,
        default: 'icon',
    },
    name: {
        type: String,
        required: true,
    },
    color: {
        type: String,
        default: 'currentColor',
    },
    width: {
        type: [Number, String],
        default: '24',
    },
    height: {
        type: [Number, String],
        default: '24',
    },
})
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

五、icons 文件目錄結構

# src/assets/icons
- icon1.svg
- icon2.svg
- icon3.svg
- dir/icon1.svg

六、在頁面中使用

<template>
<!-- color 不傳值 svg顏色會繼承上級元素color屬性值 -->
<svgIcon name="mine" color="#333" width="36" height="36"></svgIcon>
</template>
<script setup>
import svgIcon from "@/components/SvgIcon.vue"
</script>

七、svg圖標顏色不生效解決方案

如果svg圖標設置顏色值不生效，點擊 svg文件查看源碼，修改 fill 屬性值為 fill=“currentColor”或者 fill="" 。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;} // 就是這里把這個#ffffff改成""或者"currentColor"。
</style>
  <path class="st0"
    d="M912.051527 151.150632l-286.624817 780.499041c-5.753719 15.667798-23.118384 23.704707-38.786182 17.950989a30.220937 30.220937 0 0 1-19.305944-22.909364L498.23787 550.442426a30.220937 30.220937 0 0 0-24.265655-24.265655L97.723343 457.080057c-16.415729-3.014425-27.279412-18.766366-24.264987-35.182094a30.220937 30.220937 0 0 1 19.306612-22.910032L873.263342 112.363782c15.669134-5.753719 33.033799 2.28319 38.786849 17.951656a30.220937 30.220937 0 0 1 0 20.835194zM826.833582 205.907791a7.555234 7.555234 0 0 0-9.679684-9.650301l-573.559491 207.092476a7.555234 7.555234 0 0 0 1.149942 14.527205l297.554613 56.790594a7.555234 7.555234 0 0 1 6.020837 6.087616L603.515031 788.626754a7.555234 7.555234 0 0 0 14.549911 1.210044L826.83425 205.908459z" />
</svg>;

到此這篇關于vite+vue3項目中svg圖標組件封裝的文章就介紹到這了,更多相關vite vue3封裝svg組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: