Question

我有一个Vue Cli 3项目，我正在尝试使用vue-svgicon npm软件包，我已经按照本教程中的所有步骤进行操作：https://markus.oberlehner.net/blog/dynamically-loading-svg-icons-with-vue/ 但是，当我检查预期的svg元素时，尽管它存在于Google Chrome的检查器中，但它仍未显示在DOM中-可以提供任何帮助。

var ctx = document.getElementById("mybarChart").getContext("2d");

var mybarChart = new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Candidate A Votes',
      backgroundColor: "#000080",
      data: [{x:90, y:1}]
    }, {
      label: 'Candidate B Votes2',
      backgroundColor: "#d3d3d3",
      data: [{x:70, y:2}]
    }, {
      label: 'Candidate C  Votes3',
      backgroundColor: "#add8e6",
      data: [{x:45, y:3}]
    }]
  },

  options: {
    legend: {
      display: true,
      position: 'top',
      labels: {
        fontColor: "#000080",
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

我通过npm安装了vue-svgicon，然后运行了脚本以将svg解析为javascript。然后：

 <svg version="1.1" viewBox="0 0 16 16" class="svg-icon svg-fill" 
 style="height: 3em;"></svg>

然后在要添加SVG的组件中，添加了以下内容：

import App from './App.vue';
import router from './router';
import store from './store';
import './styles/global.scss';
import * as svgicon from 'vue-svgicon';

Vue.use(svgicon);


new Vue({
 router,
  store,
  render: h => h(App)
 }).$mount('#app')

SVG元素未呈现

0 个答案: