如何在路由文件里meta属性的icon里可以放svg图片

要在路由文件的meta属性的icon中使用SVG图片，您需要使用Vue.js的内置组件`<svg-icon>`。首先，您需要将SVG图标放在一个单独的文件中，例如`logo.svg`。接着，在您的Vue.js项目中，可以创建一个名为`SvgIcon`的全局组件，用于将SVG图标转换为可重用的Vue.js组件。以下是一个示例：

// SvgIcon.vue

<template>
  <svg :class="className" :aria-hidden="true">
    <use :xlink:href="`#icon-${icon}`" />
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    icon: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  }
};
</script>

在路由文件中，您可以使用`<svg-icon>`组件来引用您的SVG图标，并将其作为meta属性的icon值。例如：

// router.js

import Vue from 'vue';
import Router from 'vue-router';
import SvgIcon from './components/SvgIcon.vue';

Vue.component('svg-icon', SvgIcon);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: 'Home',
        icon: 'logo'
      }
    }
  ]
});

在上面的示例中，`SvgIcon`组件被全局注册，并在路由文件中使用。在meta属性中，将SVG图标的名称`logo`作为icon值传递给`<svg-icon>`组件。