vue之svg-icon组件使用

vue 专栏收录该内容
14 篇文章 0 订阅
一、添加相关依赖包

当前使用的vue版本为2.6.11,加入库svg-sprite-loader
package.json新增如下:

"devDependencies": {
    "svg-sprite-loader": "^4.1.6",
     ...
  },
二、新增SvgIcon组件
1.在components文件下新建SvgIcon组件

在这里插入图片描述

SvgIcon下的index.vue组件内容如下:

<template>
  <svg :class="svgClass"
       aria-hidden="true"
       v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
2.新增icon文件夹相关内容

在src下 新增icon目录,如下
在这里插入图片描述
svg文件夹下存放svg格式的文件,index.js文件内容如下:

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // svg组件

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
3.main.js中引入icons文件

main.js中添加 import ‘./icons’,文件如下:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import './icons'
createApp(App)
  .use(store)
  .use(router)
  .mount("#app");
3.在vue.config.js文件下配置svg-sprite-loader
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule("svg")
      .exclude.add(resolve("src/icons"))
      .end();
    config.module
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]"
      })
      .end();
  },
};

三、svg文件的使用

test为svg目录下的test文件

<template>
  <div>
    <svg-icon iconClass="test"/>test
  </div>
</template>

svg文件可以在iconfont里面获取

在这里插入图片描述

效果图:
在这里插入图片描述
查看dom结构如下:
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值