jin-icons.vue 969 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view class="content"><view class="icon" :style="{ color: color, fontSize: fontSize }" v-html="type" @click="toclick"></view></view>
  3. </template>
  4. <script>
  5. export default {
  6. props: {
  7. type: {
  8. type: String,
  9. default: '&#xe644;'
  10. },
  11. color: {
  12. type: String,
  13. default: '#666666'
  14. },
  15. fontSize: {
  16. type: String,
  17. default: '34rpx'
  18. }
  19. },
  20. methods: {
  21. toclick() {
  22. this.$emit('click');
  23. }
  24. }
  25. };
  26. </script>
  27. <style scoped>
  28. .content {
  29. display: flex;
  30. align-items: center;
  31. justify-content: center;
  32. }
  33. @font-face {
  34. font-family: 'jin';
  35. /** 阿里巴巴矢量图标库的字体库地址,可以替换自己的字体库地址 **/
  36. /* src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype'); */
  37. src:url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');
  38. /* src: url('./font_1491431_6m7ltjo8wi.ttf') format('truetype'); */
  39. }
  40. .icon {
  41. font-family: jin !important;
  42. font-size: 34rpx;
  43. }
  44. </style>