前端实战-基于Nuxt的SVG使用

为什么要使用SVG

虽然我们在日常开发的时候，在使用iview 或者element ui等组件时，通常会包含一些常用icon；但是在面对一些特定的需求时，或者自己想high一下，这些通用的icon并不能很好的满足我们。这个时候我们可能会拿到一些SVG适量图，但是怎么去使用这些矢量图呢。

项目目录

这里以基于Nuxtjs的开发为例：

image.png

要使用SVG矢量图，在这里会使用到上述匡出来的文件。

其中在asserts中放置一些图片资源（个人习惯）如图所示：

image

在components中放入需要创建的Icon组件, 代码如下：

<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`,
      }
    },
  },
}
</script>

需要注意的是这段代码：

<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>

然后，我们都知道，在使用nuxt的时候，我们使用任何插件的时候都需要在plugins文件夹创建，所以，我们在这里创建icon.js文件，为了去创建一个全局的Icon组件，代码如下：

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue' // svg component

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

最后一步，我们需要在nuxt的配置文件中去配置一下：

首先配置plugins：

  plugins: [ '@/plugins/icon'],

然后我们需要配置build：

 /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      const svgRule = config.module.rules.find(rule => rule.test.test('.svg'))
      svgRule.exclude = [resolve(__dirname, 'assets/icons/svg')]

      // Includes /assets/icons/svg for svg-sprite-loader
      config.module.rules.push({
        test: /\.svg$/,
        include: [resolve(__dirname, 'assets/icons/svg')],
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]',
        },
      })
    },
  },

可以看到在loader上使用了 svg-sprite-loader组件，所以我们需要安装它

yarn add svg-sprite-loader 
or
 npm i svg-sprite-loader -S

现在我们可以使用已经配置好的Icon组件：

<svg-icon icon-class="3" class-name="card-panel-icon" />

效果截图

image.png