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


  • 2020-04-17 11:28:35

    TweenMax中文初级教程二

    TimelineMax是GreenSock 动画平台中的动画组织、排序、管理工具,可创建时间轴(timeline)作为动画或其他时间轴的容器,这使得整个动画控制和精确管理时间变得简单,避免了通过反复delay和回调进行动画。 作者:李霖弢 链接:https://www.jianshu.com/p/8c0361e43bf5 来源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • 2020-04-17 11:28:57

    TweenMax中文初级教程三

    动画关键词:CSS(一般可以省略) CSSPlugin用于在TweenMax中对DOM元素的CSS相关属性进行动画 在CSSPlugin中CSS属性需要写成驼峰式,例如font-size应当写作fontSize。有时候你可以在一些默认px为单位的属性中省略单位,CSSPlugin还可以在不同的单位间做动画:

  • 2020-04-17 11:29:23

    TweenMax中文初级教程四

    用于滚动窗口(类似于window.scrollTo(x, y))或DOM元素(如myDiv.scrollTop = y; myDiv.scrollLeft = x;)。滚动窗口时使用window作为动画目标。

  • 2020-04-17 14:06:29

    图片解释EaseIn,EaseOut,EaseInOut

    1.EaseIn:即缓动发生在入口处,也就是刚开始的时候。 2.EaseOut:即缓动发生在出口处,也就是结束之前。 3.EaseInOut:就是两边都有缓动了.

  • 2020-04-21 14:47:13

    Redis危险命令重命名、禁用

    flushdb,清空数据库 flushall,清空所有记录,数据库 config,客户端连接后可配置服务器 keys,客户端连接后可查看所有存在的键

  • 2020-04-21 15:13:15

    redis 简单使用

    Redis和Memcached类似,也属于k-v数据存储 Redis官网 https://redis.io支持更多value类型,除了和string外,还支持hash、lists(链表)、sets(集合)和sorted sets(有序集合) Redis是可以把数据存储在磁盘上的并且使用了两种文件格式:全量数据(RDB)和增量请求(aof)。一般叫做redis持久化 全量数据格式是把内存中的数据写入磁盘,便于下次读取文件进行加载。

  • 2020-04-21 15:14:20

    SpringBoot + Redis:基本配置及使用

    # Redis数据库索引(默认为0) spring.redis.database=0# Redis服务器地址 spring.redis.host=127.0.0.1# Redis服务器连接端口 spring.redis.port=6379# Redis服务器连接密码(默认为空) spring.redis.password=# 连接池最大连接数(使用负值表示没有限制) spring.redis.jedis.pool.max-active=20# 连接池最大阻塞等待时间(使用负值表示没有限制) spring.redis.jedis.pool.max-wait=-1# 连接池中的最大空闲连接 spring.redis.jedis.pool.max-idle=10# 连接池中的最小空闲连接 spring.redis.jedis.pool.min-idle=0# 连接超时时间(毫秒) spring.redis.timeout=1000