vue中将svg转为字体图标并在css中通过icon-wrapper这种形式使用

在Vue.js中，将SVG转换为字体图标并应用于CSS通常涉及以下几个步骤：

1. **SVG到Font**:
首先，你需要将SVG文件转换为字体文件。可以使用在线工具如IcoMoon、Fontello或者`gulp-svg-iconfont-generator`这样的前端构建工具。将SVG导入工具，生成包含图标字形的CSS样式表和字体文件。

2. **创建字体图标组件**:
创建一个名为`IconWrapper.vue`的组件，作为容器来显示图标。这个组件通常会有一个属性接受字体名称和图标类别，例如：

<template>
  <div :class="{'icon-wrapper': true, [iconClass]: true}" :style="{ fontSize: iconSize + 'px' }">
    <span class="svg-icon">{{ iconName }}</span>
  </div>
</template>

<script>
export default {
  props: {
    iconClass: { type: String, required: true },
    iconSize: { type: Number, default: 24 }, // 可自定义图标大小
  },
};
</script>

<style scoped>
.svg-icon {
  font-family: 'your-font-name', sans-serif; /* 使用你生成的字体名 */
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}
</style>

3. **在模板中使用**:
在需要显示图标的地方，你可以像下面这样传入图标类别：

<IconWrapper :iconClass="'your-icon-class'" :iconSize="16" />

这里`'your-icon-class'`对应你在生成的CSS文件中定义的每个SVG类别的名称。