vue-svg-icon的安装和使用

vue-svg-icon 是一个用于在 Vue.js 项目中轻松使用 SVG 图标的库。以下是安装和使用 vue-svg-icon 的步骤，包括 Vue 2 和 Vue 3 的配置。

可以结合 iconfont 图标库使用

安装 vue-svg-icon

首先，确保你已经安装了 vue-svg-icon。你可以使用 npm 或 yarn 进行安装：

npm install vue-svg-icon --save
or
yarn add vue-svg-icon

Vue 2

1. 配置 vue-svg-icon

在你的 Vue 2 项目中配置 vue-svg-icon。你需要在项目的入口文件（通常是 main.js）中进行配置。
main.js

import Vue from 'vue';
import App from './App.vue';
import SvgIcon from 'vue-svg-icon/Icon.vue';

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

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

2. 使用 vue-svg-icon

在你的组件中使用 vue-svg-icon。你可以通过 name 属性指定要使用的 SVG 图标。
示例组件
假设你有一个 SVG 图标文件 example.svg，你可以在组件中使用它。
CustomIcon.vue

<template>
  <div>
    <svg-icon name="example" width="50" height="50" />
  </div>
</template>

<script>
export default {
  name: 'CustomIcon',
};
</script>

<style scoped>
/* 添加一些样式 */
</style>

3. 配置 SVG 图标路径【默认是在根目录的 src/svg 下面，如果放置在这里可不用配置3和4】

你需要配置 vue-svg-icon 的 SVG 图标路径。你可以在项目的入口文件中进行配置。
main.js

import Vue from 'vue';
import App from './App.vue';
import SvgIcon from 'vue-svg-icon/Icon.vue';

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

// 配置 SVG 图标路径
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('./assets/icons', true, /\.svg$/);
requireAll(req);

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

4. 将 SVG 图标放入指定目录

将你的 SVG 图标文件放入指定的目录（例如 ./assets/icons）。
目录结构示例

src/
├── assets/
│   └── icons/
│       ├── example.svg
│       └── another-icon.svg
├── components/
│   └── CustomIcon.vue
├── App.vue
└── main.js

Vue 3

使用

<template>
  <div>
    <!-- name 对应的就是 src/svg 下面的 arrowUpBold.svg -->
    <SvgIcon name="arrowUpBold" width="50" height="50"></SvgIcon>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import SvgIcon from 'vue-svg-icon/Icon.vue';

export default defineComponent({
  name: 'IconExample',
  components: {
    SvgIcon,
  },
});
</script>

<style scoped>
/* 添加一些样式 */
</style>

解释

1. 安装 vue-svg-icon：
   • 使用 npm 或 yarn 安装 vue-svg-icon。
2. 配置 vue-svg-icon：
   • 在项目的入口文件（main.js 或 main.ts）中注册 vue-svg-icon 组件。
   • 配置 SVG 图标路径，使用 require.context 动态加载指定目录中的所有 SVG 文件。
3. 使用 vue-svg-icon：
   • 在组件中使用 vue-svg-icon，通过 name 属性指定要使用的 SVG 图标。
   • 将 SVG 图标文件放入指定的目录（例如 ./assets/icons）。

通过这些步骤，你可以在 Vue 2 和 Vue 3 项目中轻松使用 vue-svg-icon 来管理和使用 SVG 图标。