vue(二）vue3 + vite + 自定义svg使用

代码中使用svg图标

版本说明:

"dependencies": {

    "element-plus": "^2.2.17",

    "vue": "^3.2.39",

    "vue-router": "^4.1.5"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^3.1.0",

    "fast-glob": "^3.2.12",

    "vite": "^3.1.0",

    "vite-plugin-svg-icons": "^2.0.1"

  }

用于SVG显示

npm i fast-glob -D

npm i vite-plugin-svg-icons -D

实例：

代码说明：

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        createSvgIconsPlugin({
            // 指定需要缓存的图标文件夹
            iconDirs: [path.resolve(process.cwd(), 'src/assets/icon/svg')],
            // 指定symbolId格式
            symbolId: '[name]',

            /**
             * 自定义插入位置
             * @default: body-last
             */
            // inject?: 'body-last' | 'body-first'

            /**
             * custom dom id
             * @default: __svg__icons__dom__
             */
            // customDomId: '__svg__icons__dom__',
        }),
    ]
})

main.js

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import router from './router/router_config'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import SvgIcon from './components/icon/icon-component.vue'
import 'virtual:svg-icons-register'

createApp(App)
    .component('svg-icon', SvgIcon)
    .use(ElementPlus)
    .use(router)
    .mount('#app')

icon-component.vue

<template>
    <!-- aria-hidden：默认为false，设置为true表示会把整个元素包括子元素从可访问树（AOM）上移除，但是在DOM树上还是存在的 -->
    <!-- fill：如果在动画接收还需要保持动画的值，可用于设置颜色 -->
    <svg :class="'svg-icon ' + ($attrs.iconClass ? $attrs.iconClass : '')" aria-hidden="true">
        <use class="svg-use" :href="'#' + $attrs.iconName" />
    </svg>
</template>

<script setup>
import { defineComponent, computed } from 'vue'
// 可以打印所有注册的svg图标
// import ids from 'virtual:svg-icons-names'

</script>
<style scope>
.svg-icon {
    vertical-align: -0.1em;
    /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    /* fill: currentColor; */
    /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
    margin : auto auto;
}
</style>

svg目录:

 使用：

<div class="custom-div-menu">
    <svg-icon :iconName="obj.icon" iconClass="icon-calss-menu"></svg-icon>
</div>

<style scoped>
    .icon-calss-menu {
        height: 2rem;
        width: 2rem;
        margin-bottom: -0.7rem;
    }
    /** 太长了省略号 */
    .custom-div-menu {
        width: 132px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        /* display: block; */
    }
</style>