我正在使用 VueJs 创建一个单页应用程序,但我面临的问题是我的所有 SVG 都没有被渲染。我正在使用 webpack-simple CLI,我正在使用 SLDS(Salesforce Lightning 设计系统)作为 CSS 框架,它为我提供了我所有的 svg。
这是我不显示 SVG 的组件之一:
export default {
props: ['tabData']
}Run Code Online (Sandbox Code Playgroud)
<template>
<li class="slds-context-bar__item slds-context-bar__item_tab" role="presentation">
<a href="javascript:void(0);" class="slds-context-bar__label-action" role="tab" title="Tab Item 2"
aria-selected="false" tabindex="-1" aria-controls="context-tab-panel-3" id="context-tab-id-3">
<div class="slds-icon_container" :title="tabData.tabName">
<svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../../assets/lightning/assets/icons/standard-sprite/svg/symbols.svg#case"/>
</svg>
</div>
<span class="slds-truncate" :title="tabData.tabName">{{ tabData.tabName }}</span>
</a>
<div class="slds-context-bar__icon-action slds-context-bar__dropdown-trigger slds-dropdown-trigger slds-dropdown-trigger_click slds-p-left_none slds-p-right_none">
<button class="slds-button slds-button_icon slds-button_icon-container slds-button_icon-x-small"
aria-haspopup="true"
tabindex="-1">
<svg class="slds-button__icon" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="../../assets/lightning/assets/icons/utility-sprite/svg/symbols.svg#chevrondown"/>
</svg>
</button>
</div> …Run Code Online (Sandbox Code Playgroud)