uniapp小程序引入svg图标不显示

在使用UniApp开发小程序时，如果引入的SVG图标不显示，可能有以下几个原因：

导入的SVG图标文件路径不正确：首先确保SVG图标文件的路径是正确的，可以在文件资源管理器中检查文件路径是否正确。

引入SVG图标时没有正确添加文件后缀名：在引入SVG图标时，需要在文件名称后面添加正确的文件后缀名，例如：.svg。

小程序配置文件缺少SVG图标相应的配置项：需要在小程序的配置文件（如manifest.json）中添加SVG图标的配置项，通常类似于下面的代码：

"easycom": {
"autoscan": true,
"custom": {
"^u-(.*)": "@/components/u-$1/u-$1.vue"
}
}

以上代码中的^u-(.*)是匹配SVG图标组件的自定义规则，@/components/u-$1/u-$1.vue是引入SVG图标组件的路径。

SVG图标文件本身存在兼容性问题：有些SVG图标文件可能存在兼容性问题，可能某些浏览器或小程序不支持某些SVG特性或属性，导致图标无法显示。可以尝试使用其他可用的SVG图标文件进行测试。

存在其他代码错误导致问题：在引入SVG图标的过程中，如果存在其他代码错误，可能会导致图标无法正确加载和显示。可以检查代码中是否存在其他错误，并确保其他部分的代码正常运行。

如果以上方法仍无法解决问题，可以尝试搜索相关文档或资源库以获取更多帮助。

相关问题

vue3+ts+uniapp+vite引入svg图标

在Vue3 + TypeScript + UniApp（原Dcloud）项目中，结合Vite构建工具，引入SVG图标通常分为以下几个步骤：

安装依赖：首先需要安装vue-svg-loader 和 @types/vue-svg-icon，这两个库分别用于处理SVG文件并在Vue组件中使用。你可以通过npm或yarn来安装它们：
npm install vue-svg-loader @types/vue-svg-icon --save-dev

配置loader：在.vitepress/vite.config.ts 或 .vite/config.js 文件中，添加SVG加载器配置到模块解析规则中。例如：
import { defineConfig } from 'vite';
import vueSvgLoader from 'vue-svg-loader';

export default defineConfig({
build: {
// ... 其他配置项
loaderOptions: {
svg: {
// 使用 vue-svg-loader 解析 SVG 文件
transform: vueSvgLoader(),
},
},
},
});

使用SVG：在Vue组件中，可以直接将SVG内容插入到<template>标签内，或者作为<img>元素src属性的值。如果要动态引用SVG，可以创建一个包含路径的对象，并在模板中通过<template v-bind:src="iconPath">引用它：
<template>
<div :class="{'my-svg': true}">
<img v-if="!isIconString" :src="iconPath" alt="SVG Icon">
<template v-else>
<svg :viewBox="icon.viewbox" :width="icon.width" :height="icon.height">
<use :href="#{{ icon.id }}"></use>
</svg>
</template>
</div>
</template>

<script setup lang="ts">
const icon = {
id: "my-svg-icon",
viewBox: "0 0 24 24",
width: 24,
height: 24,
pathData: `<path d="M..."></path>`, // 你的SVG数据
};
const isIconString = false; // 根据需求设置为布尔值

// 在data()或setup()中获取并传递给模板
const iconPath = isIconString ? "#" + icon.id : icon.pathData;
</script>

阿里巴巴矢量图标uniapp引入svg

阿里巴巴矢量图标库 UniApp 提供了一种便捷的方式将 SVG 格式的图标导入到你的项目中。SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，支持无限放大而不失真，非常适合用于界面设计和图标资源。
在UniApp中引入SVG步骤如下：

准备SVG文件：确保你有一个清晰、高质量的SVG图标文件，可以在网上下载或自行设计。

将SVG转换为JSON格式：UniApp推荐使用@dcloudio/uni-cli-icon-generator工具，它可以从SVG文件自动生成相应的Icon组件配置。运行命令行工具，例如：
uni-i your_svg_file.svg -o your_icon_name.json

定义Icon组件：在你的项目uni-app目录下创建或打开pages下的某个文件夹（如common），然后创建一个新的.vue文件，例如uni-svg-icon.vue。在这个文件中，引用生成的JSON配置并编写Icon组件：
<template>
<icon :src="require('./your_icon_name.json')" />
</template>

<script>
import { Icon } from '@dcloudio/uni-ui';
export default {
components: {
Icon,
},
};
</script>

引入组件：在需要使用的页面上，导入并使用这个SVG Icon组件即可。