svg精灵图使用方法持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情 sv

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第18天，点击查看活动详情

svg的使用方法

1.svg可以当成图片路径使用

<img src="./user.svg" alt="">

2.可以直接使用svg标签

<svg width="130" height="130" viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
     <path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-
     37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 
     31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325
     48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-
     41.271z" stroke="#979797"/>
</svg>

width: 宽度
heigth: 高度
viewBox : 四个值 0 0 130 130

前两个值: x与y轴的偏移量

后两个值: 图片的原大小

注意: 只设width与heigth是不会出现效果的,必须配合viewBox 属性
fill:填充颜色

svg进阶使用(svg精灵图)

svg组件的使用, 参考:

语法:

1.声明svg(相当于一个容器)

2.用symbol包裹图标路径形状之类代码

symbol是一个一个组装好的元件，这这些一个一个的元件就是我们即将使用的一个一个SVG图标。

3.使用精灵图

以上方法较为麻烦,vue可以配置svg-sprite-loader实现自己的icon组件

一.核心代码: 把所有的svg图片引入进来

import Vue from 'vue'

// 导入svgIcon组件对象
import SvgIcon from '@/components/SvgIcon'// svg component

// 注册全局组件 <svg-icon></svg-icon>
Vue.component('svg-icon', SvgIcon)

// 将svg中的文件生成svg精灵图
const req = require.context('./svg', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

补充: require.context 语法:

   require.context(directory,useSubdirectories,regExp)
   directory:表示检索的目录
   useSubdirectories：表示是否检索子文件夹
   regExp:匹配文件的正则表达式,一般是文件名
   例如 require.context("@/views/components",false,/.vue$/)

二.将svg的使用封装成组件

将使用svg这个语法进行封装

接收传过来的svg文件名

三.函数式组件: 通过render渲染结构

<script>
// 函数式组件: 通过render渲染结构
// 一个组件必须有结构: template结构渲染 或 render函数结构渲染
export default {
  name: 'MenuItem',
  functional: true, // 声明函数式组件
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  // 渲染当前组件结构
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []

    // 渲染图标
    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

    // 渲染标题
    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }
}
</script>

以上为实现的原理,vue-element-admin都已经封装好了,我们使用时,只需要以下步骤:

一: 侧边栏中,通过路由配置使用

1.将所需要的svg精灵图复制到src/icons文件夹下

2.配置路由的时候添加meta属性,来显示侧边栏标题与图表

// 组织架构模块
import Layout from '@/layout'

export default {
  path: '/departments',
  component: Layout,
  children: [
    {
      path: '',
      name: 'departments',
      component: () => import('@/views/departments'),
      meta: { title: '组织架构', icon: 'tree' }
    }
  ]
}

注:meta中tiltle为侧边栏标题,icon为svg精灵图==>值为对应svg文件名

二.页面中使用

1.直接使用封装好的组件(这个组件全局注册过)

1)封装好的组件

2)全局已注册

2.在需要的地方当做标签直接调用即可

<svg-icon icon-class="bug" />

icon-class是传给子组件的文件名