vue3自定义svg组件封装后图标很小修复

问题描述：

如下图，同样的图标，没有额外增加样式，就非常mini

而且svg标签的大小就是我style设置的

但是，这是咋回事呀，真的很不理解

下面是我出现问题的代码

SvgIcon.vue👇 这是components

<template>
    <svg :width="width" :height="height" class="svg-icon">
      <use :href="iconName" />
    </svg>
  </template>
   
<script setup>
    import { defineProps, computed } from 'vue';

    const props = defineProps({
        name: {
            type: String,
            required: true,
        },
        color: {
            type: String,
            default: '#333',
        },
        width: {
            type: String,
            default: '24px',
        },
        height: {
            type: String,
            default: '24px',
        },
    })
    const iconName = computed(()=> `#${props.name}`)
    const svgClass = computed(()=>{
        if(props.name){
            return `svg-icon ${iconName.value}`
        }
        return "svg-icon"
    })
</script>
​
<style scoped>
    .svg-icon {
        width: 24px;
        height: 24px;
        fill: currentColor;
        vertical-align: middle;
    }
</style>

一个单独加了样式的就是正常大小，另外默认组件样式的就是那么的mini
index.vue👇

<template>
    <div class="home-main">
        <van-grid :column-num="5" :border="false" class="home-navs-top">
            <van-grid-item v-for="(item,i) in home_navs_top" :key="i" :to="item.toUrl" >
                <svg-icon :name="item.icon" class="navs-top-svg" />
                <div>{{ item.text }}</div>
            </van-grid-item>
        </van-grid>
        <!-- 中间多行nav -->
        <van-grid square :column-num="5" :border="false" class="home-navs">
            <van-grid-item v-for="(item,i) in home_navs" :key="i" :to="item.toUrl" >
                <svg-icon :name="item.icon" class="icon-svg" />
                <div class="home-navs_text">{{ item.text }}</div>
            </van-grid-item>
        </van-grid>

    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const home_navs_top = ref([
    {icon:'food',text:'美食',toUrl:'',},
    {icon:'food',text:'甜点饮品',toUrl:'',},
    {icon:'food',text:'超市便利',toUrl:'',},
    {icon:'food',text:'生鲜果蔬',toUrl:'',},
    {icon:'food',text:'外卖买药',toUrl:'',},
]);
const home_navs = ref([
    {icon:'food',text:'午餐',toUrl:'',},
    {icon:'food',text:'买酒',toUrl:'',},
    {icon:'food',text:'新鲜水果',toUrl:'',},
    {icon:'food',text:'汉堡披萨',toUrl:'',},
]);
</script>


<style lang="scss" scoped>
.home-main{
    background: #fff;
    margin-top: -30px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    .home-navs-top{
        .navs-top-svg{
            width: 2.8rem;
            height: 2.8rem;
        }
    }
    .home-navs{
        margin-top: 26px;
        .home-navs_text{
            margin-top: 12px;
        }
    }
}
</style>

vite.config.ts👇

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

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
      vue(),
      AutoImport({
        resolvers: [VantResolver()],
      }),
      Components({
        resolvers: [VantResolver()],
      }),
      createSvgIconsPlugin({
          // 指定需要缓存的图标文件夹
          iconDirs: [path.resolve(process.cwd(), 'src/icon/svg')],
          // 指定symbolId格式
          symbolId: '[name]',
      })
  ],
  resolve:{
    alias:{
      '@':path.resolve(process.cwd(),'src'),
      '~':path.resolve(process.cwd(),'./'),
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/base.scss";`
      }
    }
  }
})

main.ts👇

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// router路由
import router from './router'
app.use(router)

// vant
import 'vant/lib/index.css';

// store
import {store,key} from './store'
app.use(store,key)

// 导入svg图片插件,可以在页面上显示svg图片
import 'virtual:svg-icons-register'
import SvgIcon from './components/SvgIcon.vue'
app.component('svg-icon', SvgIcon)


app.mount('#app')

解决办法

真的是破案了破案了，我用的grid开了 squrae 限制了高宽
把‘squrae ’去掉就完事了