首页uniapp svg图片封装

uniapp svg图片封装

时间: 2023-08-29 20:12:18 浏览: 198

Uniapp 中可以使用 `svg` 标签来显示矢量图像，也可以将 `svg` 文件作为组件引入到页面中。如果需要在多个页面中使用相同的 `svg` 图片，可以将其封装为组件。以下是一个简单的 `svg` 图片组件封装示例： 1. 创建 `SvgIcon.vue` 组件，代码如下： ```vue <template> <svg :class="svgClass" :style="svgStyle" aria-hidden="true"> <use :xlink:href="iconName" /> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconName: { type: String, required: true }, svgClass: { type: String, default: '' }, svgStyle: { type: Object, default: () => {} } } } </script> ``` 2. 在 `components/` 目录下创建 `svg` 文件夹，并将 `svg` 图片文件放置在其中。 3. 在 `App.vue` 中引入 `SvgIcon` 组件： ```vue <template> <div id="app"> <SvgIcon iconName="svg-file-name" /> </div> </template> <script> import SvgIcon from '@/components/svg/SvgIcon.vue' export default { name: 'App', components: { SvgIcon } } </script> ``` 这样，在需要使用 `svg` 图片时，只需要在组件中引入 `SvgIcon` 组件并传入对应的 `iconName` 参数即可。

阅读全文