修改引入的图标大小

rename
  • 84

请问下我这个在一个vue页面里面加了这个代码,然后我实际访问的时候,图标变得非常大。其余报错都没有

*<template>
<el-row>
<el-button>Default</el-button>
<el-buttontype="primary">Primary</el-button>
<el-buttontype="success">Success</el-button>
<el-buttontype="info">Info</el-button>
<el-buttontype="warning">Warning</el-button>
<el-buttontype="danger">Danger</el-button>
<el-button>中文</el-button>
</el-row>

<el-row>
<el-buttonplain>Plain</el-button>
<el-buttontype="primary"plain>Primary</el-button>
<el-buttontype="success"plain>Success</el-button>
<el-buttontype="info"plain>Info</el-button>
<el-buttontype="warning"plain>Warning</el-button>
<el-buttontype="danger"plain>Danger</el-button>
</el-row>

<el-row>
<el-buttonround>Round</el-button>
<el-buttontype="primary"round>Primary</el-button>
<el-buttontype="success"round>Success</el-button>
<el-buttontype="info"round>Info</el-button>
<el-buttontype="warning"round>Warning</el-button>
<el-buttontype="danger"round>Danger</el-button>
</el-row>

<el-row>
<el-button:icon="Search"circle><el-icon><Search/></el-icon></el-button>
<el-buttontype="primary"circle><el-icon><Edit/></el-icon></el-button>
<el-buttontype="success"circle><el-icon><Check/></el-icon></el-button>
<el-buttontype="info"circle><el-icon><Message/></el-icon></el-button>
<el-buttontype="warning"circle><el-icon><Star/></el-icon></el-button>
<el-buttontype="danger"circle><el-icon><Delete/></el-icon></el-button>
</el-row>
</template>
<script>
import{Search,Edit,Check,Message,Star,Delete}from'@element-plus/icons'
exportdefault{
components:{
Search,
Edit,
Check,
Message,
Star,
Delete
}
}
</script> 
*

main.js引入如下:

import { createApp } from 'vue'//这个就是vue3的版本
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'//引入app
import router from './router'
//引入echarts

import * as echarts from 'echarts'


const app=createApp(App).use(router).mount('#app')
app.use(ElementPlus)
app.echarts=echarts

换种写法也不行

  <el-icon :size="20"><aim/> </el-icon>
</template>
<script>
import { Aim} from '@element-plus/icons'
export default {
  components: {
    // Search,
    // Edit,
    // Check,
    // Message,
    // Star,
    // Delete,
    aim:Aim
  }
}
</script>

image.png

回复
阅读 859
1 个回答
温柔的码农
  • 380
✓ 已被采纳
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏