组件更新

zhongshujie

3 天以前 20f565e134743664045fc42376ef5acd826acbe3

 src/components/svgIcon/index.vue

@@ -1,7 +1,7 @@
<template>
  <!-- 如果是 Element UI 图标，保持不变 -->
  <i v-if="iconFileName.indexOf('el-icon-') === 0" :class="iconFileName" />
  

  <!-- 如果是 SVG 图标，进行改造 -->
  <svg v-else class="svg-icon" aria-hidden="true" v-on="$listeners" :style="svgStyle">
    <!-- 
@@ -13,6 +13,7 @@
</template>

<script>
import config from "@/assets/js/config";
export default {
  name: 'SvgIcon',
  props: {
@@ -24,7 +25,7 @@
    color: {
      type: String,
      // 默认值设为 'inherit'，它会继承父元素的文字颜色
      default: 'inherit' 
      default: 'inherit'
    },
    // 可选：增加尺寸控制
    size: {
@@ -36,15 +37,12 @@
    // 使用计算属性来动态生成样式
    svgStyle() {
      return {
        // 关键点：将传入的 color 值赋给 CSS 的 'color' 属性
        color: this.color,
        // 关键点：设置图标尺寸
        fontSize: this.size,
        // 如果需要，也可以在这里设置宽高，但用 font-size 更灵活
        // width: this.size,
        // height: this.size,
      };
    }
  },
  mounted() {
    console.log(config.activeBook.bookThemeColor, "987654");
  }
}
</script>
@@ -52,7 +50,6 @@
<style scoped>
.svg-icon {
  /* 
    核心魔法！
    1. width 和 height 使用 em 单位，使其与 font-size 关联。
    2. overflow: hidden 防止图标在某些情况下溢出。
    3. vertical-align: 调整图标与文字的对齐基线。
@@ -63,6 +60,7 @@
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor; 
  fill: currentColor;
}

</style>