import { defineConfig } from "vite";import path from "path";import react from "@vitejs/plugin-react-swc";import checker from "vite-plugin-checker";import { compression } from "vite-plugin-compression2";import { createHtmlPlugin } from "vite-plugin-html";import svgr from "vite-plugin-svg...
6.在vite.config.ts中导入svgIcon.ts,在defineConfig()中加入createSvg(),如下所示 import{fileURLToPath,URL}from"node:url";import{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";//这里会报svgIcon.ts不在tsconfig.config.json文件列表中,在tsconfig.config.json的include里加//"./src/ic...
import cesium from 'vite-plugin-cesium'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), cesium(), svgBuilder('./src/assets/icons/svg/')], server: { host: '0.0.0.0', port: 3000, fs: { strict: false }, } }) 3.代码 /src/components/SvgIcon/index...
接下来,我们就来写一个 Vite 插件来支持以组件方式来使用 svg 资源。首先, 安装一下需要的依赖: npm i resolve @svgr/core -D 1. 接着,在plugins目录新建 svgr.ts: import { Plugin } from 'vite'; import * as fs from 'fs'; import * as resolve from 'resolve'; interface SvgrOptions { //...
"@svgr/babel-plugin-add-jsx-attribute@8.0.0": version "8.0.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22" integrity sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9Sf...
vite-plugin-svgr Vite plugin to transform SVGs into React components vite vite-plugin pd4d10 •4.3.0•2 months ago•320dependents•MITpublished version4.3.0,2 months ago320dependentslicensed under $MIT 5,591,612 vite-plugin-vue-devtools ...
1. 安装 svg-sprite-loader npm i svg-sprite-loader --save-dev 2. SvgIcon component <!-- /src/components/SvgIcon/icon.vue --> import {computed, useCssModule, useAttrs} from "vue"; export interface SvgIconProps { name: string } const props = defineProps<SvgIconProps>() const style...
vite-plugin-svg-icons 使用 首先创建目录src/assets/icons,将svg文件都保存到当前目录 接着创建一个公共组件ShIcon组件,放到components目录下 ShIcon.vue 内容为: <template><svgaria-hidden="true":style="{ width, height }":fill="color"><use:xlink:href="prefix + name"/></svg></template>interfaceP...
}).wb-icon.svg { width: 1em; height: 1em; fill: currentColor; overflow: hidden; vertical-align: middle; } 在main.js中引入WbIcon组件 网上有好多文章,没说明引入,我这提一下 import{createApp}from"vue";importrouterfrom"./router";importAppfrom"./App.vue";importWbIconfrom"@/components/icon...
"plugin:vue/vue3-essential", 'plugin:vue/vue3-essential', //1.继承.prettierrc.js文件规则 2.开启rules的 "prettier/prettier": "error" 3.eslint fix的同时执行prettier格式化 'plugin:prettier/recommended', ], "parser": 'vue-eslint-parser', ...