vite-plugin-svg-icons 引入
时间: 2023-09-20 07:09:18 浏览: 105
vite-plugin-svg-icons是一个Vite插件,用于在Vue3 + Vite项目中使用SVG图标。要引入vite-plugin-svg-icons,你需要按照以下步骤进行操作:
1. 首先,在你的项目中安装vite-plugin-svg-icons插件。你可以使用yarn或npm进行安装,命令如下:
```
yarn add vite-plugin-svg-icons -D
```
或
```
npm i vite-plugin-svg-icons -D
```
2. 安装完成后,在你的项目中使用该插件。你需要在主入口文件(通常是main.ts)中引入插件,代码如下:
```typescript
import 'virtual:svg-icons-register'
```
3. 现在你可以在你的Vue组件中使用SVG图标了。你可以通过以下代码来使用SVG图标:
```html
<svg aria-hidden="true">
<!-- #icon-文件夹名称-图片名称 -->
<use href="#icon-login-eye-off" />
</svg>
```
这样,你就成功引入了vite-plugin-svg-icons插件,并可以在Vue3 + Vite项目中使用SVG图标了。
#### 引用[.reference_title]
- *1* *3* [vite vue引入svg图标及封装 (轻松上手)](https://blog.csdn.net/m0_46846526/article/details/127765708)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue3中 如何在vite中使用svg图标详解](https://blog.csdn.net/weixin_40816738/article/details/128279513)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文