uniapp 封装本地svg组件

你可以使用uni-svg组件来封装本地svg组件。首先，将svg文件放置在项目的static目录下，然后在你的组件中使用uni-svg组件来引入该文件。例如：

<template>
  <uni-svg :src="'/static/icons/' + iconName + '.svg'" :style="iconStyle" @click="handleClick"></uni-svg>
</template>

<script>
  export default {
    props: {
      iconName: {
        type: String,
        required: true
      },
      iconStyle: {
        type: Object
      }
    },
    methods: {
      handleClick() {
        // 处理点击事件
      }
    }
  }
</script>

在上面的代码中，通过props传入iconName来动态加载不同的svg文件，使用iconStyle来控制svg的样式。当用户点击svg图标时，会触发handleClick方法来处理相应的逻辑。

相关问题

UNIAPP中使用SVG

在UNIAPP中使用SVG，可以通过以下步骤实现：

1. 安装SVG插件：在HBuilderX中，打开插件市场，搜索并安装SVG插件。

2. 导入SVG文件：将SVG文件复制到项目的static文件夹中。

3. 在页面中使用SVG：使用`<svg-icon>`标签来引入SVG文件，例如：

<svg-icon name="svg文件名" class="svg-class"></svg-icon>

其中，`name`属性为SVG文件名（不需要后缀），`class`属性为自定义的SVG样式。

4. 在CSS中设置SVG样式：使用`.svg-class`样式来设置SVG的样式，例如：

.svg-class {
    width: 20px;
    height: 20px;
    fill: red;
}

其中，`width`和`height`属性为SVG的宽度和高度，`fill`属性为SVG的填充颜色。

以上就是在UNIAPP中使用SVG的方法，希望对您有所帮助。

UNIAPP如何使用SVG

在UNIAPP中使用SVG需要先安装uni-svg插件。安装命令如下：

npm install uni-svg --save

安装成功后，在需要使用SVG的页面或组件中引入uni-svg：

import uniSvg from '@/components/uni-svg/uni-svg.vue'
export default {
  components: { uniSvg }
}

然后在模板中使用uni-svg组件，并传入SVG文件路径：

<uni-svg class="logo" src="../../static/logo.svg"></uni-svg>

在样式中可以调整SVG的大小和颜色：

.logo {
  width: 50px;
  height: 50px;
  fill: #333;
}

注意：使用SVG时需要在配置文件中开启Webpack的svg-loader，具体配置方法可以参考uni-svg插件的文档。