问题描述:
如下图,同样的图标,没有额外增加样式,就非常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 ’去掉就完事了