代码中使用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>