| | |
|---|
| | | :xlink:href 动态绑定图标ID |
|---|
| | | 注意：这里假设你的图标ID是 "icon-" + iconFileName |
|---|
| | | --> |
|---|
| | | <use :xlink:href="`#icon-${iconFileName}`" /> |
|---|
| | | <use class="useBox" :xlink:href="`#icon-${iconFileName}`" /> |
|---|
| | | </svg> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | <style scoped> |
|---|
| | | .svg-icon { |
|---|
| | | /* |
|---|
| | | 1. width 和 height 使用 em 单位，使其与 font-size 关联。 |
|---|
| | | 2. overflow: hidden 防止图标在某些情况下溢出。 |
|---|
| | | 3. vertical-align: 调整图标与文字的对齐基线。 |
|---|
| | | 4. fill: currentColor; 告诉SVG内部所有没有指定fill的元素， |
|---|
| | | 统一使用当前元素的 'color' 值作为填充色。 |
|---|
| | | */ |
|---|
| | | width: 1em; |
|---|
| | | height: 1em; |
|---|
| | | overflow: hidden; |
|---|
| | | vertical-align: -0.15em; |
|---|
| | | fill: currentColor; |
|---|
| | | } |
|---|
| | | |
|---|
| | | </style> |
|---|
