@zhangqingcq/vgce v0.1.5
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 wantput svg files into
src/asset/svgs
, then file name need to be same with config.nameput 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
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago