uniapp vue3项目如何使用vite-plugin-svg-icons
时间: 2024-02-23 10:54:13 浏览: 45
在uniapp vue3项目中使用vite-plugin-svg-icons插件可以按照以下步骤进行操作:
1. 首先,安装vite-plugin-svg-icons插件。可以使用以下命令进行安装:
```shell
yarn add vite-plugin-svg-icons -D
```
2. 在项目的根目录下创建一个vite.config.js文件,并在该文件中配置vite-plugin-svg-icons插件。可以按照以下示例进行配置:
```javascript
import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
svgIcons({
iconDirs: [/* 指定存放svg图标的目录路径 */],
symbolId: 'icon-[dir]-[name]',
})
]
})
```
在上述示例中,需要将`iconDirs`替换为存放svg图标的目录路径。
3. 在main.ts文件中引入svg图标。可以按照以下示例进行引入:
```javascript
import 'virtual:svg-icons-register'
```
以上就是在uniapp vue3项目中使用vite-plugin-svg-icons插件的步骤。
相关问题
vue3封装vite-plugin-svg-icons插件封装SvgIcon组件
Vue3中封装vite-plugin-svg-icons插件并封装SvgIcon组件的步骤如下:
1. 首先安装vite-plugin-svg-icons插件和fast-glob依赖包,可以使用以下命令进行安装:
```
npm i vite-plugin-svg-icons
npm i fast-glob
```
2. 在项目的配置文件中进行插件的配置。具体配置方式可以参考vite-plugin-svg-icons的官方文档。
3. 将SVG图标文件放置在对应的路径下,并与iconDirs设置保持一致。
4. 在Vue组件中使用SvgIcon组件,并传递相应的props。例如,在index.vue文件中可以这样使用SvgIcon组件:
```html
<template>
<svg-icon :name="nameVal" color="blue" class-name="menu-svg-icon" :icon-title="iconTitle"></svg-icon>
</template>
<script setup>
import { ref } from 'vue';
import SvgIcon from "@/components/SvgIcon.vue";
let iconTitle = ref('svg图片');
let nameVal = ref('layer');
</script>
<style scoped>
.menu-svg-icon {
width: 180px;
height: 180px;
color: red !important;
}
</style>
```
5. 最后,在需要全局引入SvgIcon组件的地方进行引入和使用。
请注意,这只是一个大致的步骤,具体的实现可能会根据项目的需求和配置方式有所差异。你可以根据自己的实际情况进行相应的调整和配置。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue2+vite中,通过插件vite-plugin-svg-icons和fast-glob封装组件使用svg图片](https://blog.csdn.net/weixin_44867717/article/details/126603027)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【vue3】使用vite-plugin-svg-icons插件显示本地svg图标](https://blog.csdn.net/qq_36977923/article/details/127302147)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
vite-plugin-svg-icons 使用
vite-plugin-svg-icons 是一个 Vite 插件,用于在项目中使用 SVG 图标。它可以将 SVG 图标转换为可在项目中使用的 Vue 组件或 React 组件,并提供了一些方便的功能。
要使用 vite-plugin-svg-icons,首先需要安装它。在你的项目根目录下运行以下命令:
```
npm install vite-plugin-svg-icons --save-dev
```
或者使用 yarn:
```
yarn add vite-plugin-svg-icons --dev
```
安装完成后,在你的 Vite 配置文件(一般是 `vite.config.js`)中添加以下代码:
```javascript
import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'
export default defineConfig({
plugins: [
svgIcons()
]
})
```
这样就完成了插件的配置。接下来,你可以在你的项目中使用 SVG 图标了。
假设你有一个名为 `logo.svg` 的 SVG 图标文件,在你的 Vue 或 React 组件中引入它:
```javascript
import { VueComponent as Logo } from '@/icons/logo.svg'
// 使用 Logo 组件
```
这样就可以使用 `Logo` 组件来展示 `logo.svg` 的内容了。
vite-plugin-svg-icons 还提供了一些额外的功能,比如自动导入所有 SVG 图标、配置图标输出目录等。你可以在插件的文档中找到更多详细的用法和配置选项。
希望能帮到你!如果有任何问题,请随时提问。