前端实战-基于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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


  • 2017-04-02 00:44:46

    NGINX + PHP-FPM 502 相关事

    NGINX + PHP-FPM 报 502 错误,我想大部分 SA 都遇到过吧。 根据报错的频率,可以分为两种情况,间歇性的502和连续性的502。 这里只讨论第一种情况——间歇性的502。

  • 2017-04-02 00:52:26

    php-fpm占用系统资源分析

    由上图分析,可以看出共有602个进程,其中有601个进程休眠了。这好像有点不对劲,内核进程也就80个左右,加上memcached, nginx, mysqld,也不会超出90个。除了这些,剩下的只有php-fpm管理的php-cgi,难道是…?

  • 2017-04-02 00:56:36

    php-fpm占用系统资源分析

    由上图分析,可以看出共有602个进程,其中有601个进程休眠了。这好像有点不对劲,内核进程也就80个左右,加上memcached, nginx, mysqld,也不会超出90个。除了这些,剩下的只有php-fpm管理的php-cgi,难道是…?

  • 2017-04-03 14:23:17

    Android Studio --“Cannot resolve symbol” 解决办法

    Android Studio 无法识别同一个 package 里的其他类,将其显示为红色,但是 compile 没有问题。鼠标放上去后显示 “Cannot resolve symbol XXX”,重启 Android Studio,重新 sync gradle,Clean build 都没有用。

  • 2017-04-06 14:59:13

    PHP配置文件详解

    PHP是一个简单易学,功能强大的语言,尤其在Web开发,开发效率高,方便快捷。研究一下php.ini了解PHP相关配置会有好处的,对PHP有更加深入的了解。

  • 2017-04-06 15:00:46

    怎么实时查看mysql当前连接数

    今天有一台mysql服务器突然连接数暴增,并且等待进程全部被锁...因为问题解决不当,导致被骂...OTL 总结:以后要快速定位错误,布置解决方案

  • 2017-04-06 15:07:57

    PHP-FPM不完全指南

    fpm启动后会先读php.ini,然后再读相应的conf配置文件,conf配置可以覆盖php.ini的配置。 启动fpm之后,会创建一个master进程,监听9000端口(可配置),master进程又会根据fpm.conf/www.conf去创建若干子进程,子进程用于处理实际的业务。

  • 2017-04-06 15:11:03

    浅析php-fpm 和 mysql 之间的关系详解

    php-fpm 和 mysql 之间的关系估计不做底层开发应用的是不会去考虑分析它们了,如果是的话我们来看一篇关于php-fpm 和 mysql 之间的关系的教程。