# 組件名`cap4-icon` ---- ### 引入 ```js import Cap4Icon from 'cap4-pc-ui/lib/cap4-icon'; import 'cap4-pc-ui/lib/cap4-icon/css/cap4-icon.css'; ``` ### 基礎用法 <template> <div class="demo-block"> <cap4-icon v-model="icon" :leftSpan="leftSpan" :iconColor="iconColor" :bgColor="bgColor" @chooseIcon="chooseIcon"></cap4-icon> </div> </template> <script> export default { data() { return { leftSpan: '請選擇圖標', icon: 'cap-icon-new-business-opportunity', iconColor: '#67bfff', bgColor: '#ebebeb' }; }, methods: { chooseIcon() { alert('實現選圖標'); } } }; </script> ::: demo ```html <template> <div class="demo-block"> <cap4-icon v-model="icon" :leftSpan="leftSpan" :iconColor="iconColor" :bgColor="bgColor" @chooseIcon="chooseIcon"></cap4-icon> </div> </template> <script> export default { data() { return { leftSpan: '請選擇圖標', icon: 'cap-icon-new-business-opportunity', iconColor: '#67bfff', bgColor: '#ebebeb' }; }, methods: { chooseIcon() { alert('實現選圖標'); } } }; </script> ``` ::: ### Attributes | 參數 | 說明 | 類型 | 可選值 | 默認值 | |---------- |------------------------------------ |---------- |------------- |-------- | |value | 圖標 (必填)) | String | — | '' | |leftSpan | 左文本 (選填)) | String | — | | |rightSpan | 右文本 (選填)) | String | — | | |iconColor | 圖標色 (選填)) | String | — | | |iconClass | 圖標樣式類 (選填)) | String | — | | |bgColor | 圖標背景色 (選填)) | String | — | |