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

2019-12-10 11:13:50

参考地址 前端实战-基于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 componentVue.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" />

效果截图



作者:走虾观花
链接:https://www.jianshu.com/p/cd5487c1980b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


  • 2018-01-23 02:22:17

    andorid,把控件置于最顶端。bringToFront的意外发现

     bringToFront方法在SDK中的说明是“Change the view's z order in the tree, so it's on top of other sibling views”,翻译过来就是改变view的z轴,使其处在他父view的顶端。关于bringToFront的实现,网上有很多资料介绍,大体来说就是将这个view从父view中移除,然后再加入父view的顶端。具体实现如何呢?

  • 2018-01-26 01:05:22

    Android在thread中Toast不能显示问题解决

    一般如果不是在主线程中又开启了新线程的话,一般都会碰到这个问题。 原因是在创建新线程的时候默认情况下不会去创建新的MessageQueue。