97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
<template>
|
|
<text
|
|
class="custom-icon"
|
|
:class="iconClass"
|
|
:style="{ color: color, fontSize: size + 'px' }"
|
|
@click="$emit('click')"
|
|
></text>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "my-icon",
|
|
props: {
|
|
// 图标名称，例如 'icon-home'
|
|
name: {
|
|
type: String,
|
|
default: ""
|
|
},
|
|
// 图标颜色
|
|
color: {
|
|
type: String,
|
|
default: "#333333"
|
|
},
|
|
// 图标大小，单位 rpx
|
|
size: {
|
|
type: [Number, String],
|
|
default: 16
|
|
}
|
|
},
|
|
computed: {
|
|
iconClass() {
|
|
// 这里的 'custom-icon' 必须和下面 font-family 的定义或者样式前缀对应
|
|
const name = `icon-${this.name}`;
|
|
return name;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 1. 引入并定义字体名称 */
|
|
@font-face {
|
|
font-family: 'myIconFont';
|
|
/* 微信小程序若本地引用报错，可换成 base64 字符串或网络绝对路径 */
|
|
src: url('@/static/font/iconfont.ttf') format('truetype');
|
|
}
|
|
|
|
/* 2. 定义基础样式 */
|
|
.custom-icon {
|
|
font-family: "myIconFont" !important;
|
|
font-size: inherit;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
display: inline-block;
|
|
}
|
|
|
|
.icon-sanjiaozhou-maohao:before {
|
|
content: "\e630";
|
|
}
|
|
.icon-sanjiaozhou-fengexian:before {
|
|
content: "\e631";
|
|
}
|
|
.icon-sanjiaozhou-douhao:before {
|
|
content: "\e626";
|
|
}
|
|
.icon-sanjiaozhou-0:before {
|
|
content: "\e629";
|
|
}
|
|
.icon-sanjiaozhou-1:before {
|
|
content: "\e627";
|
|
}
|
|
.icon-sanjiaozhou-2:before {
|
|
content: "\e62b";
|
|
}
|
|
.icon-sanjiaozhou-3:before {
|
|
content: "\e62c";
|
|
}
|
|
.icon-a-sanjiaozhou-4:before {
|
|
content: "\e62f";
|
|
}
|
|
.icon-sanjiaozhou-5:before {
|
|
content: "\e62d";
|
|
}
|
|
.icon-sanjiaozhou-6:before {
|
|
content: "\e628";
|
|
}
|
|
.icon-sanjiaozhou-7:before {
|
|
content: "\e625";
|
|
}
|
|
.icon-sanjiaozhou-8:before {
|
|
content: "\e62a";
|
|
}
|
|
.icon-sanjiaozhou-9:before {
|
|
content: "\e62e";
|
|
}
|
|
</style> |