| | |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import config from "@/assets/js/config"; |
|---|
| | | export default { |
|---|
| | | name: 'SvgIcon', |
|---|
| | | props: { |
|---|
| | |
|---|
| | | // 使用计算属性来动态生成样式 |
|---|
| | | 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> |
|---|
| | |
|---|
| | | <style scoped> |
|---|
| | | .svg-icon { |
|---|
| | | /* |
|---|
| | | 核心魔法！ |
|---|
| | | 1. width 和 height 使用 em 单位，使其与 font-size 关联。 |
|---|
| | | 2. overflow: hidden 防止图标在某些情况下溢出。 |
|---|
| | | 3. vertical-align: 调整图标与文字的对齐基线。 |
|---|
| | |
|---|
| | | vertical-align: -0.15em; |
|---|
| | | fill: currentColor; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
