vue3 vite 获取本地文件夹下所有svg文件的name
时间: 2024-03-20 08:39:30 浏览: 198
您可以使用Node.js的文件系统(fs)模块来解决这个问题,以下是一种可能的实现:
```javascript
import { readdirSync } from 'fs';
const svgFileNames = readdirSync('./path/to/svg/folder')
.filter(file => file.endsWith('.svg'))
.map(file => file.replace('.svg', ''));
```
这里的 `readdirSync` 方法会同步读取指定路径下的所有文件名,返回一个字符串数组。我们使用 `filter` 方法来过滤出所有以 `.svg` 结尾的文件名,然后使用 `map` 方法将每个文件名的 `.svg` 后缀去掉,只保留文件名部分。最终得到一个仅包含SVG文件名的字符串数组 `svgFileNames`。
相关问题
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 vue svg
vite是一个现代化的前端构建工具,用于快速构建Vue项目。它支持使用插件来加载和处理各种文件类型,包括SVG图标文件。
在使用vite构建Vue项目时,你可以通过安装vite-svg-loader插件,并在vite.config.js中进行相关配置来处理SVG图标文件。你需要指定需要缓存的SVG图标文件夹,并设置symbolId格式,这个格式与在引入SVG组件时的name配置项有关。
然后,你可以在项目中创建一个文件夹,并将SVG图标放入其中。接下来,在main.js文件中引入并注册SvgIcon组件。这个组件可以显示SVG图标,你可以通过传入name、prefix和color属性来自定义图标的名称、前缀和颜色。
最后,全局注册SvgIcon组件,这样你就可以在项目的任何地方使用它来显示SVG图标了。
综上所述,vite可以很方便地处理和使用SVG图标文件,并且通过SvgIcon组件可以轻松地在Vue项目中显示这些图标。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vite-svg-loader:Vite 2.x插件可将SVG文件作为Vue组件加载](https://download.csdn.net/download/weixin_42176827/18659286)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3+vite配置svg文件的全局使用(想怎么改颜色、宽高都可以)](https://blog.csdn.net/m0_38134431/article/details/125508459)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文