feat: Create examples directory and add some examples

* Add svg plugins for vite & rollup
update: more bundle stuff

examples/CustomConnectionLine/ConnectionLine.tsx

@@ -0,0 +1,39 @@
+import { defineComponent, PropType } from 'vue';
+import { ConnectionLineComponentProps } from '../../src';
+
+const ConnectionLine = defineComponent({
+  props: {
+    sourceX: {
+      type: Number as PropType<ConnectionLineComponentProps['sourceX']>,
+      required: true
+    },
+    sourceY: {
+      type: Number as PropType<ConnectionLineComponentProps['sourceY']>,
+      required: true
+    },
+    targetX: {
+      type: Number as PropType<ConnectionLineComponentProps['targetX']>,
+      required: true
+    },
+    targetY: {
+      type: Number as PropType<ConnectionLineComponentProps['targetY']>,
+      required: true
+    }
+  },
+  setup(props) {
+    return () => (
+      <g>
+        <path
+          fill="none"
+          stroke="#222"
+          stroke-width={1.5}
+          class="animated"
+          d={`M${props.sourceX},${props.sourceY} C ${props.sourceX} ${props.targetY} ${props.sourceX} ${props.targetY} ${props.targetX},${props.targetY}`}
+        />
+        <circle cx={props.targetX} cy={props.targetY} fill="#fff" r={3} stroke="#222" stroke-width={1.5} />
+      </g>
+    );
+  }
+});
+
+export default ConnectionLine;

examples/CustomConnectionLine/index.tsx

@@ -0,0 +1,28 @@
+import RevueFlow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '../../src';
+
+import ConnectionLine from './ConnectionLine';
+import { defineComponent, ref } from 'vue';
+
+const initialElements: Elements = [{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
+
+const ConnectionLineFlow = defineComponent({
+  components: { Background },
+  setup() {
+    const elements = ref(initialElements);
+    const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value));
+    const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value));
+
+    return () => (
+      <RevueFlow
+        elements={elements.value}
+        connectionLineComponent={ConnectionLine as any}
+        onElementsRemove={onElementsRemove}
+        onConnect={onConnect}
+      >
+        <Background variant={BackgroundVariant.Lines} />
+      </RevueFlow>
+    );
+  }
+});
+
+export default ConnectionLineFlow;