Vue封装svgicon组件如何使用

段落一：Vue封装svg-icon组件的基础概念及用法 通过封装svg-icon组件，我们可以在Vue项目中方便地引用svg图标资源。svg-icon组件封装过程主要分为两个部分：一是在components文件夹中创建svg-icon.vue组件，定义必要的数据结构和方法；二是在main.js中注册此组件。 代码示例：

svg-icon.vue组件代码示例

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
import Vue from 'vue';

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('@/assets/icons', false, /\.svg$/);
requireAll(req);

Vue.component('svg-icon', {
  props: {
    name: String,
    className: String,
  },
  computed: {
    iconName() {
      return `#${this.name}`;
    },
  },
});
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

main.js中注册svg-icon组件代码示例

import Vue from 'vue';
import App from './App.vue';
import router from './router';

import '@/components/svg-icon';

Vue.config.productionTip = false;

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

段落二：svg-icon组件的数据结构 svg-icon组件的数据结构主要包括两个部分：props和computed。 props：该属性接受从父组件传递过来的参数。在svg-icon组件中，接受两个参数，分别是name和className。其中，name参数指定图标的名称，这个名称将通过computed方法转为对应的图标id。className参数可以利用该组件的数据结构来设置自定义样式。 computed：该部分主要是一个计算式方法，用于生成iconName，其值为将name加上#的字符串。 代码示例：

import Vue from 'vue';

const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('@/assets/icons', false, /\.svg$/);
requireAll(req);

Vue.component('svg-icon', {
  props: {
    name: String,
    className: String,
  },
  computed: {
    iconName() {
      return `#${this.name}`;
    },
  },
});

段落三：svg-icon组件的样式设置 svg-icon组件的样式可在该组件的style标签中设置。以svg-icon组件的样式设置为例，该组件的样式分别设置了以下部分： .svg-icon：整个svg-icon组件的样式设置，包括宽度、高度、填充颜色等属性。 svg-icon>svg：svg标签的样式设置，将svg标签中的xmlns属性设置为了http://www.w3.org/2000/svg。 svg-icon>use：use标签的样式设置，将xlink:href属性与computed方法中的iconName对应。 代码示例：

.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.svg-icon > svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: inline-block;
  font-size: inherit;
  overflow: visible;
};
.svg-icon > svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.svg-icon > use {
  width: 1em;
  height: 1em;
  pointer-events: none;
  overflow: inherit;
}

段落四：使用svg-icon组件并引用svg图标 在Vue项目中使用svg-icon组件，需要先在main.js中注册该组件。接着，在需要显示svg图标的地方，使用svg-icon组件并传入图标的名称。 代码示例：

最后总结一下，通过封装svg-icon组件，可以实现在Vue项目中方便地引用svg图标资源。svg-icon组件的数据结构包括props和computed两个部分，其中props接受从父组件传递过来的参数，computed主要用于生成iconName。svg-icon组件的样式可在该组件的style标签中设置，包括svg-icon、svg-icon>svg、svg-icon>use等部分的设置。最后，在需要显示svg图标的地方，直接使用svg-icon组件并传入图标的名称即可。