VGCE
Vector graphics configure editor. 矢量图组态编辑器。
Guide
-
install
npm i @zhangqingcq/vgce element-plus@^2.3.8 ace-builds@^1.14.0 lodash-es^4.17.21 vue-echarts@^6.5.1 animate.css@^4.1.1
or
pnpm add @zhangqingcq/vgce element-plus@^2.3.8 ace-builds@^1.14.0 lodash-es^4.17.21 vue-echarts@^6.5.1 animate.css@^4.1.1
-
change main.ts or main.js
//main.js or main.ts import '@zhangqingcq/vgce/dist/style.css'
-
use editor
<script setup lang="ts"> import {SvgEditor} from '@zhangqingcq/vgce' function preview(d: any) { //save d and send it to SvgViewer's data } </script> <template> <SvgEditor @onPreview="preview"/> </template>
-
use viewer
<script setup lang="ts"> import {SvgViewer} from '@zhangqingcq/vgce' </script> <template> <SvgViewer :data="xxx"/> </template>
-
custom toolbar
-
copy
src/config/
and change as you want -
put svg files into
src/asset/svgs
, then file name need to be same with config.name -
put custom vue components file into
src/config/files
, then import insrc/config/index.ts
and export withvueComp
-
PS: you have to install
vite-plugin-svg-icons
plugin to append your svg to html dom.<script setup lang="ts"> import {SvgEditor} from '@zhangqingcq/vgce' import {config} from '@/config' </script> <template> <SvgEditor :customToolbar="config"/> </template>
-
-
how to use
vite-plugin-svg-icons
-
npm i vite-plugin-svg-icons -D
orpnpm add vite-plugin-svg-icons -D
- change
vite.config.ts
// vite.config.ts import { fileURLToPath, URL } from 'node:url' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' export default defineConfig({ plugins: [ xxx, createSvgIconsPlugin({ iconDirs: [fileURLToPath(new URL('./src/assets/svgs', import.meta.url))], symbolId: 'svg-[name]', svgoOptions: false, customDomId: '__svg__icons__dom__'//your id, do not use this id! }) ], xxx }) ```
- change
main.ts
// main.ts import 'virtual:svg-icons-register'
- PS: if there is error:
Cannot find module ‘fast-glob’
,then runnpm i fast-glob -D
orpnpm add fast-glob -D
-
-
example
-
download VGCE
-
pnpm i
ornpm i
-
pnpm dev
ornpm run dev
-