Vue封装svg-icon组件使用教程

下面是Vue封装svg-icon组件使用教程，包括:

1. 前置知识点
2. svg文件的处理
3. 封装svg-icon组件
4. 使用封装的svg-icon组件
5. 示例说明
6. 总结

1. 前置知识点

在使用本文中的技术栈之前，需要掌握以下知识：

• Vue.js基础知识
• webpack基础知识
• ES6基础语法

2. svg文件的处理

在使用svg文件之前，需要进行一些处理：

1. 将svg文件保存到项目中的assets/icons目录下。
2. 在webpack.config.js的module中配置svg-sprite-loader，代码如下：

{
  test: /\.svg$/,
  include: [resolve('src/assets/icons')], // 指定svg目录
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        symbolId: 'icon-[name]', // 使用图标名称作为symbol的id
      },
    },
  ],
}

1. 在main.js或者其他入口文件中导入所有的svg文件，代码如下：

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

3. 封装svg-icon组件

创建一个svg-icon组件，代码如下：

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

<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
  },
}
</script>

在computed属性中定义了两个计算属性，iconName属性用于获取svg文件中的symbol的id，svgClass属性用于控制svg标签的class属性。

4. 使用封装的svg-icon组件

在需要使用svg-icon图标的地方，比如在按钮中使用，代码如下：

<template>
  <button class="btn">
    <svg-icon icon-class="add" class-name="icon"/>
    添加
  </button>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'button',
  components: {
    SvgIcon,
  },
}
</script>

在上述代码中，通过使用svg-icon组件，实现了在按钮中使用add图标，并且添加了icon样式类。

5. 示例说明

下面是使用svg-icon组件实现的两个示例：

示例1：在导航菜单中使用svg-icon图标

<template>
  <div class="nav-menu">
    <ul>
      <li>
        <a href="#">
          <svg-icon icon-class="home"/>
          首页
        </a>
      </li>
      <li>
        <a href="#">
          <svg-icon icon-class="message"/>
          消息
        </a>
      </li>
      <li>
        <a href="#">
          <svg-icon icon-class="setting"/>
          设置
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'nav-menu',
  components: {
    SvgIcon,
  },
}
</script>

在上述代码中，通过svg-icon组件，实现在导航菜单中使用了三个不同的图标。

示例2：在表格中使用svg-icon图标

<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tom</td>
          <td>18</td>
          <td>
            <svg-icon icon-class="edit"/>
            <svg-icon icon-class="delete"/>
          </td>
        </tr>
        <tr>
          <td>Jerry</td>
          <td>20</td>
          <td>
            <svg-icon icon-class="edit"/>
            <svg-icon icon-class="delete"/>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'table',
  components: {
    SvgIcon,
  },
}
</script>

在上述代码中，通过svg-icon组件，实现在表格中使用了edit和delete两个图标。

6. 总结

通过本文的介绍，我们了解了svg-icon组件的封装和使用方法，并且给出了两个实际的示例，希望对大家的实际开发有所帮助。