首页 > 其他分享 >一天一个知识点-----vue项目简单引入svg

一天一个知识点-----vue项目简单引入svg

时间:2022-08-23 14:45:50浏览次数:106  
标签:知识点 vue svg loader iconSvg components icon

项目背景:vue3.0 + elementPlus

image
注意项目结构,主要涉及的几个文件及文件夹
---直接上代码----
1.最开始是要下载包 npm install svg-sprite-loader
2.配置项目的配置文件 vue.config.js

const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = {
  chainWebpack: config => {
    // set svg-sprite-loader
    // 清除配置
    config.module
      .rule('svg')  //找到svg-loader 
      .exclude.add(resolve('src/components/iconSvg/icons'))  //排除目录
      .end()
    // 添加配置
    config.module
      .rule('icons')
      .test(/\.svg$/)  //正则匹配 格式为 svg
      .include.add(resolve('src/components/iconSvg/icons')) //只对src/icon 目录生效  当前目录指向自己项目svg的文件夹
      .end()
      .use('svg-sprite-loader')  //注入插件svg-sprite-loader
      .loader('svg-sprite-loader')  //添加loader
      .options({    //配置为 icon-文件名
        symbolId: 'icon-[name]'
      })
      .end()
  },
};

注意:resolve()里面的路劲,是要指向自己项目存放svg的文件夹;svg-sprite-loader里面的配置symbolId选项 没有配置的话 默认是文件的名称;
3.新建svg的组件

// src/components/iconSvg/index.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" :fill="iconColor"/>
  </svg>
</template>

<script>
/**
 *   <svg-icon icon-class="set"></svg-icon>
 */
export default {
  name: "SvgIcon",
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ""
    },
    iconColor: {
      type: String,
      default: ""
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;  //跟svg-sprite-loader 生成的symbolId相对应上
    },
    svgClass() {
      if (this.className) {
        return "svg-icon " + this.className;  //自定义样式
      } else {
        return "svg-icon"; //默认样式
      }
    }
  },
};
</script>

<style scoped>
.svg-icon {
  width: 16px;
  height: 16px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
	margin-right: 10px;
}
</style>

4.写svg引入的plugin src/plugins/iconsSvg.js

import iconSvg from "@/components/iconSvg"; // svg组件

export default {
  install: (app) => {
    // 注册全局组件
    app.component("iconSvg", iconSvg);
    const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
    const req = require.context("@/components/iconSvg/icons", false, /\.svg$/);
    requireAll(req); //相当于引入components/iconSvg/icons文件下的svg文件
  },
};

注意:此时引入使用的是reqireContext 了解可看reqireContext入门

5.需要在 入口文件main.js 内引入

import { createApp } from "vue";
import App from "./App.vue";
// 引入自定义的svg icon
import iconsSvg from "@/plugins/iconsSvg.js";

const app = createApp(App);
app.use(iconsSvg)

6.页面使用

<icon-svg icon-class="dg" icon-color="#304056"></icon-svg>

// icon-class后面接的是相应icon文件夹下面svg的名称

整体的svg整体的构建完成,后续要添加svg 只需要在相应的文件夹内放入svg图片即可,使用时使用相应的名称进行引入;


如果你使用的是vue2.0的话需要注意的是第四步第五步

可以通过第四步引入vue进行全局注册,第五步只要引入相应的js就行,不用use

//第四步
import iconSvg from "@/components/iconSvg"; // svg组件
import vue from "vue";
// 注册全局组件
vue.component("iconSvg", iconSvg);
const requireAll = reqireContext => reqireContext.keys().map(reqireContext);
const req = require.context("@/components/iconSvg/icons", false, /\.svg$/);
requireAll(req); //相当于引入components/iconSvg/icons文件下的svg文件

//第五步
import "@/plugins/iconsSvg.js";

打完收工---------------------------这是webpack的插件使用,如果你是vite的话 不适用

标签:知识点,vue,svg,loader,iconSvg,components,icon
From: https://www.cnblogs.com/zjxlicheng/p/16616111.html

相关文章

  • vue3 单文件组件——父组件访问子组件的实例
    如果一个子组件使用的是选项式API 或没有使用 <scriptsetup>,被引用的组件实例和该子组件的 this 完全一致,这意味着父组件对子组件的每一个属性和方法都有完全的访问......
  • vue大文件上传组件选哪个好?
    ​一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到......
  • Vue项目跑不起来 Uncaught SyntaxError: The requested module '/node_modules/.vit
    一:问题介绍vue项目运行跑不起来提示Browserslist:caniuse-liteisoutdated.Pleaserunnpxbrowserslist@latest--update-db遇到这个情况首先想到重新安装依赖重启项目......
  • vue3源码学习
    建议先通过官方指南了解3.0都干了啥、解决了什么问题。然后才是阅读其源码(通过利器),进阶了解它是如何实现的。https://juejin.cn/post/6925668019884523534......
  • 创建一个VUE项目
    前期准备1、安装node,官网安装(自带npm)2、安装npm国内镜像cnpm:npminstall-gcnpm;安装后可能在项目中无法使用,执行cnpminstallexpress-g3、安装开源前端打包工具webpa......
  • vue3新内置组件teleport传送门
    使用到的原因:在使用固定定位弹出弹出框的时候,突然遇到位置不正确,而且在有index高级别的情况下依旧位置出错表现如下:出现原因:我的代码出现的tf元素,导致定位祖先元素发......
  • vue中$forceUpdate的使用
    Vue中的$forceUpdate有强制刷新的意思,但是这个针对于深层次结构数据,数据通过赋值进行了更新,但是vue监听不到。深结构数据对于普通类型的数据来说,我们不需要操心数据绑定,Vue......
  • vue-router使用addRoute动态添加主界面的子路由
    1、需求描述从别处导出的可用前端文件,存放在系统@/views/下,不配置静态路由,当访问改菜单时,根据当前菜单的path动态向主界面(路由path:'/',name:'homePage')中添加子路由,使......
  • better-scroll在终端触屏上滑动失效(vue)
    this.$nextTick(()=>{this.scroll=newBScroll(this.$refs.scroll,{scrollX:true,click:true,disableMouse:false,//启用鼠标拖动disableTouch:false//启用......
  • Vue3中插槽(slot)用法汇总
    Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是你是否了解它全部用法呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。什么是插槽简单来说就是......