import{createApp}from"vue";importAppfrom"./App.vue";importsvgIconfrom'./icons/svgIcon.vue'createApp(App).component('svg-icon',svgIcon).mount("#app"); 6.在vite.config.ts中导入svgIcon.ts,在defineConfig()中加入createSvg(),如下所示 import{fileURLToPath,URL}from"node:url";import{...
vite-svg-loader //1.下载npm install vite-svg-loader --save-dev//2.配置vite.config.jsimport svgLoader from 'vite-svg-loader'exportdefaultdefineConfig({ plugins: [vue(), svgLoader()] })//3.项目是ts的,要非常注意,需要单独声明模块!!!//tsconfig.json"compilerOptions": {"types": [//一定...
Vue + Ts + Vite中使用svg 在项目目录的src下新建icons文件夹,svg目录下存放svg图片 编写index.ts文件 // 2.1 首先安装用到的插件npm install svg-sprite-loader --save-dev npm install fs// 2.2 index.ts文件如下import{ readFileSync, readdirSync }from"fs";letidPerfix ="";constsvgTitle =/<svg([^...
import svgIcon from './components/svgIcon.vue' createApp(App).component('svg-icon', svgIcon).mount('#app'); stept6: 在plugins文件夹创建svgBuilder.js(重点来了),ts版本参考:https://github.com/JetBrains/svg-sprite-loader/issues/434 import { readFileSync, readdirSync } from 'fs' let idPer...
首先要做一个vite plugin,作为一个loader加载.svg 文件,读取 svg 文件的内容,类似raw-loader。 然后需要一个 component,它去动态加载 svg 文件,并把 svg 文件的内容拼接到雪碧图里。 代码 vite.config.ts中这样写: import {defineConfig, Plugin} from 'vite' ...
步骤如下：1. 安装svg-sprite-loader，版本为6.0.11。npm install svg-sprite-loader 2. 将svg图片存放在src/icons/svg目录下，在此处创建两个文件：svgIcon.ts和svgIcon.vue（创建位置和文件名无特殊要求）。3. 在svgIcon.ts中加入以下代码（如果出现fs模块找不到的错误，请参考文章末尾附录-导入...
安装svg-sprite-loader 创建svgIcon.vue文件 创建 icons 文件夹,存放 svg 文件 在 main.ts 里面全局注入 svg-icon 组...
将你的SVG图标文件放在一个合适的位置,比如src/assets/icons目录下。 3. 在Vue 3项目中导入SVG图标 你可以直接在Vue组件中导入SVG文件作为模块,这样它们就可以被当作React组件一样使用。Vite会处理这些文件的导入,并允许你在组件中直接使用它们。 例如,假设你有一个名为icon.svg的文件,你可以这样导入它: vue <...
DOCTYPE html>chat-system 注意:如果你的项目比较复杂,有多个入口,那么就将index.html文件放到对应入口的根目录下。 最后,我们创建vite.config.ts文件,配置代码如下所示: 设置开发环境的端口号 设置路径别名 设置打包后base地址以及打包输出目录 import { defineConfig } from "vite";import...
. ├── README.md ├── dist │ ├── assets │ │ └── loading-page-1924caaa.js │ ├── index.html │ ├── manifest.json │ ├── service-worker-loader.js │ └── vite.svg ├── index.html ├── manifest.json ├── package.json ├── pnpm-lock.yaml ├──...