首页 > 其他分享 >svg使用封装-vue

svg使用封装-vue

时间:2024-01-16 16:12:47浏览次数:24  
标签:vue 封装 svg 使用 组件 import

我们在项目中经常会使用到svg,这里对svg进行封装,以方便后续的使用。

1.安装svg插件

npm i vite-plugin-svg-icons

2.在vite.config.ts中引入,用来指定svg存放位置

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import { resolve } from "path";

const plugins = [
  createSvgIconsPlugin({
    iconDirs: [resolve(process.cwd(), 'src/assets/svgs')]
  })
];

  这里指定的svg存放位置为src下的assets下的svgs文件夹。

3.封装svg组件

<template>
  <svg >
    <use :xlink:href="symbolId" :fill="color"/>
  </svg>
</template>

<script setup lang="ts">
import {computed} from 'vue';

/***
 * prefix svg前置图标
 * iconClass svg类名 必传
 * color 修改svg颜⾊
 */
const props = defineProps({
  prefix: {type: String, default: 'icon',},
  iconClass: {type: String, required: true,},
  color: {type: String, default: '#fff'}
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<style scoped>
</style>

4.在main.ts中进行注册,方便全局使用

import "virtual:svg-icons-register"
//svg组件
import SvgIcon from './components/svg/index.vue'

//注册到全局
app.component('svg-icon', SvgIcon)

  这一步实际上在我们使用业务的时候会很繁琐,我们需要针对不同的组件进行各种全局注册,这个在后面我将进行自动化封装来解决这个问题。

5.使用

  assets/svgs下文件

  ---svg1.svg

  ---aa/svg2.svg

  组件中使用

<svg-icon iconClass="svg1"></svg-icon> 

<svg-icon iconClass="aa-svg2"></svg-icon> 

  上述例子,主要是为了说明,可以使用文件夹形式存放,只要在指定文件夹下,建立多级目录也是不影响使用的。

 

标签:vue,封装,svg,使用,组件,import
From: https://www.cnblogs.com/lisir-blogshare/p/17967899

相关文章

  • 2. Vue3源码解析之 reactive
    前言我们知道Vue3中声明响应式是通过reactive和ref这两个函数,下面我们通过案例先来看下reactive是如何实现的。案例首先引入reactive和effect两个函数,之后声明obj响应式对象,接着又执行effect函数,该函数传入了一个匿名函数,最后两秒后又修改obj.name值。<!DOC......
  • 3. Vue3源码解析之 ref
    前言我们知道Vue3中声明响应式是通过reactive和ref这两个函数,上篇我们分析了reactive的实现原理,接下来我们再来看下ref是如何实现的。案例首先引入ref和effect两个函数,之后声明name响应式数据,接着又执行effect函数,该函数传入了一个匿名函数,最后两秒后又修改......
  • 在VS Code中启动Edge浏览器调试Vue项目
    最近维护一个Vue2.x的老项目,网上的资料介绍在VS中调试前端代码都是使用Chrome浏览器,但我没有装Chrome浏览器,想在VSCode中直接调试Vue代码,百度了很多资料,尝试了好几种方案,终于找到简单可行的方法。根据微软官方的资料,如果想在VSCode中使用Edge浏览器进行调试,可以安装Microsoft......
  • vue入门——???
    上次回顾:#1ref-放在组件上---》在父组件中--》this.$refs.名字-->组件对象--->组件对象--->属性,方法就可以拿到-放在普通标签上#2this.$parent-拿到父组件对象#3props-数组形式:props:['自定义属性的名字','自定义属性的名字1']......
  • 《全局实例篇》Vue.compont注册全局组件
    注册一个全局组件语法格式如下:Vue.component(tagName,options)tagName为组件名,options为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName>全局组件所有实例都能用全局组件。<divid="app"> <runoob></runoob></div><script>//注册Vue.compon......
  • 《标签篇》Vue.directives自定义指令v-my
    参考链接:https://www.runoob.com/vue2/vue-custom-directive.html自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus,该指令的功能是在页面加载时,元素获得焦点:<divid="app"> <p>页面载入时,input元素自......
  • 【vue】《 npm、pnpm和cnpm的区别及使用 》
    区别npm  NPM全称NodePackageManager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Vue/Node.js的包管理工具,相当于Java中的Maven、Python中的PIP。  npm是Node.js官方推出的包管理工具,它是JavaScript世界中最流行的包管理工具之一。通过......
  • 利用svg实现渐变仪表盘进度条
    1使用circle画圆环,利用animate实现动画效果,利用defs定义渐变色,stroke-dasharray属性,这是一个用来控制路径虚线疏密程度的属性,其值是一组描述虚线的短划线与空白间隙长度的数列。例如,如果设置stroke-dasharray="52",则路径将以5个像素的短划线和2个像素的空白间隙交替显示,其......
  • 初始化一个vite+vue3的前端项目要做的额外的事儿
    添加.editorconfig文件#http://editorconfig.orgroot=true[*]charset=utf-8indent_style=spaceindent_size=4end_of_line=lfinsert_final_newline=truetrim_trailing_whitespace=true[*.md]insert_final_newline=falsetrim_trailing_whitespace......
  • vue引入图片的几种方式
    vue引入图片的几种方式:https://blog.csdn.net/qq_36571836/article/details/118806421?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-118806421-blog-80015777.235^v40^pc_relevant_3m_sort_dl_base2&spm=1001.2101.3001.4242......