lost-sia 2.0.1-alpha3 → 2.0.1-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lost-sia",
-  "version": "2.0.1-alpha3",
+  "version": "2.0.1-alpha6",
   "description": "Single Image Annotation Tool",
   "license": "MIT",
   "repository": "l3p-cv/lost-sia",
@@ -8,6 +8,7 @@
   "module": "dist/index.es.js",
   "jsnext:main": "dist/index.es.js",
   "type": "module",
+  "types": "dist/index.d.ts",
   "keywords": [
     "lost",
     "annotation",
@@ -20,32 +21,48 @@
   },
   "exports": {
     ".": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
+      "development": {
+        "types": "./src/types.ts",
+        "import": "./src/index.ts"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     },
     "./utils": {
-      "import": "./src/utils/index.js",
-      "require": "./src/utils/index.js"
+      "development": "./src/utils/index.js",
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js",
+      "require": "./dist/utils/index.js"
+    },
+    "./models": {
+      "development": "./src/models/index.js",
+      "types": "./dist/models/index.d.ts",
+      "import": "./dist/models/index.js",
+      "require": "./dist/models/index.js"
     },
     "./styles/variables": "./src/styles/_variables.scss",
     "./styles/coreui": "./src/styles/coreui.scss"
   },
   "files": [
+    "dist",
     "src",
     "styles"
   ],
+  "style": "dist/main.css",
   "scripts": {
     "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "publishpkg": "npm publish",
     "test": "vitest run",
+    "start": "storybook dev -p 6006",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@coreui/react": "^5.0.0",
+    "@coreui/react": "^5.7.0",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
@@ -55,7 +72,8 @@
     "react-draggable": "^4.4.6",
     "sass": "^1.89.2",
     "semantic-ui-css": "2.5.0",
-    "semantic-ui-react": "^2.0.3"
+    "semantic-ui-react": "^2.0.3",
+    "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
     "lodash": "^4.17.15",
@@ -64,16 +82,11 @@
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.1.5",
-    "@storybook/addon-interactions": "^8.1.5",
-    "@storybook/addon-links": "^8.1.5",
-    "@storybook/addon-onboarding": "^8.1.5",
-    "@storybook/blocks": "^8.1.5",
-    "@storybook/react": "^8.1.5",
-    "@storybook/react-vite": "^8.1.5",
-    "@storybook/test": "^8.1.5",
+    "@microsoft/api-extractor": "^7.52.13",
+    "@storybook/addon-links": "^9.0.12",
+    "@storybook/react": "^9.0.12",
+    "@storybook/react-vite": "^9.0.12",
+    "@storybook/test": "9.0.0-alpha.2",
     "@vitejs/plugin-react": "^4.3.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.0.1",
@@ -81,18 +94,17 @@
     "eslint-config-standard-react": "^13.0.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "glob": "^10.4.1",
+    "glob": "^10.4.5",
     "prettier": "^3.3.3",
-    "prop-types": "^15.8.1",
     "react-redux": "^9.1.2",
     "redux": "^5.0.1",
-    "storybook": "^8.1.5",
-    "vite": "^5.2.12",
-    "vitest": "^1.6.0"
+    "storybook": "^9.0.12",
+    "unplugin-dts": "^1.0.0-beta.0",
+    "vite": "^5.4.19",
+    "vitest": "^1.6.1"
   },
   "eslintConfig": {
     "extends": [

package/src/AnnoExampleViewer.jsx

@@ -1,6 +1,6 @@
 import Prompt from "./Prompt";
 import React from "react";
-import { Card, Divider, Header, Image } from "semantic-ui-react";
+import { Card, Image } from "semantic-ui-react";
 
 const LabelExampleViewer = (props) => {
   const requestExample = (e) => {
@@ -14,9 +14,8 @@ const LabelExampleViewer = (props) => {
     if (!props.exampleImg) return null;
     const description = (
       <div>
-        {/* <Divider horizontal> Description </Divider> */}
         {props.lbl.description}
-        <Divider horizontal> comment </Divider>
+        <h4>Comment:</h4>
         {props.exampleImg.anno ? props.exampleImg.anno.comment : "no comment"}
       </div>
     );

package/src/Annotation/logic/Annotation.ts

@@ -0,0 +1,39 @@
+import AnnotationMode from "../../models/AnnotationMode";
+import AnnotationStatus from "../../models/AnnotationStatus";
+import AnnotationTool from "../../models/AnnotationTool";
+import { Point } from "../../types";
+
+class Annotation {
+  internalId: number;
+  externalId?: string;
+  annoTime?: number;
+  coordinates: Point[];
+  labelIds?: number[];
+  mode: AnnotationMode; // do we even need this globally? - only really used inside AnnotationComponent
+  selectedNode: number;
+  status?: AnnotationStatus;
+  type: AnnotationTool;
+  timestamp?: DOMHighResTimeStamp;
+
+  constructor(
+    internalId: number,
+    type: AnnotationTool,
+    coordinates: Point[],
+    mode: AnnotationMode = AnnotationMode.CREATE,
+    status: AnnotationStatus = AnnotationStatus.CREATING,
+    externalId: string = "",
+  ) {
+    this.internalId = internalId;
+    this.externalId = externalId;
+    this.labelIds = [];
+    this.type = type;
+    this.mode = mode;
+    this.status = status;
+    this.coordinates = coordinates;
+    this.selectedNode = 1;
+    this.timestamp = performance.now();
+    this.annoTime = 0.0;
+  }
+}
+
+export default Annotation;

package/src/Annotation/logic/AnnotationUtils.ts

@@ -0,0 +1,30 @@
+import { Point } from "../../types";
+import Annotation from "./Annotation";
+
+const addNode = (annotation: Annotation, point: Point) => {
+  const _annotation = { ...annotation };
+  _annotation.coordinates.push(point);
+  return _annotation;
+};
+
+const startAnnotimeMeasure = (annotation: Annotation) => {
+  const _annotation = { ...annotation };
+  _annotation.timestamp = performance.now();
+  return _annotation;
+};
+
+const stopAnnotimeMeasure = (annotation: Annotation): [Annotation, number] => {
+  const _annotation = { ...annotation };
+  const now = performance.now();
+  const duration = (now - _annotation.timestamp) / 1000;
+  _annotation.annoTime += duration;
+  _annotation.timestamp = now;
+
+  return [_annotation, duration];
+};
+
+export default {
+  addNode,
+  startAnnotimeMeasure,
+  stopAnnotimeMeasure,
+};

package/src/Annotation/ui/AnnotationComponent.tsx

@@ -0,0 +1,265 @@
+import AnnotationTool from "../../models/AnnotationTool";
+import Label from "../../models/Label";
+import Annotation from "../logic/Annotation";
+import * as colorUtils from "../../utils/color";
+import PointTool from "./tools/Point";
+import Line from "./tools/Line";
+import AnnoBar from "./atoms/AnnoBar";
+import CanvasAction from "../../models/CanvasAction";
+import BBox from "./tools/BBox";
+import Polygon from "./tools/Polygon";
+import { useEffect, useRef, useState } from "react";
+import { Point } from "../../types";
+import AnnotationMode from "../../models/AnnotationMode";
+import AnnotationSettings from "../../models/AnnotationSettings";
+
+type AnnotationComponentProps = {
+  scaledAnnotation: Annotation;
+  annotationSettings: AnnotationSettings;
+  possibleLabels: Label[];
+  svgScale: number;
+  pageToStageOffset: Point;
+  strokeWidth: number;
+  nodeRadius: number;
+  isSelected: boolean;
+  isDisabled?: boolean;
+  onFinishAnnoCreate: (fullyCreatedAnnotation: Annotation) => void;
+  onLabelIconClicked: (markerPosition: Point) => void;
+  onAction?: (annotation: Annotation, canvasAction: CanvasAction) => void;
+  onAnnoChanged?: (annotation: Annotation) => void;
+  onAnnotationModeChange?: (annotationMode: AnnotationMode) => void;
+};
+
+const AnnotationComponent = ({
+  scaledAnnotation,
+  annotationSettings,
+  possibleLabels,
+  svgScale,
+  pageToStageOffset,
+  strokeWidth,
+  nodeRadius,
+  isSelected,
+  isDisabled = false,
+  onFinishAnnoCreate,
+  onLabelIconClicked,
+  onAction = (_, __) => {},
+  onAnnoChanged = (_) => {},
+  onAnnotationModeChange = (_) => {},
+}: AnnotationComponentProps) => {
+  const [coordinates, setCoordinates] = useState<Point[]>(
+    scaledAnnotation.coordinates,
+  );
+
+  const [annotationMode, setAnnotationMode] = useState<AnnotationMode>(
+    scaledAnnotation.mode,
+  );
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+
+  /**
+   * during user editing of the annotation, multiple events are fired by the children
+   * onMoving for updating the data
+   * onMoved for telling its parents (us) that the user has finished moving
+   * onMoved has no access to up-to-date coordinates, because the state is always one render step behind the setState
+   * since both events are fired during the same render, onMoved would give away old coorinates
+   * use this reference as a workaround to get the up-to-date coordinates even in this edge-case
+   */
+  const coordinatesRef = useRef<Point[]>(coordinates);
+
+  useEffect(() => {
+    coordinatesRef.current = coordinates;
+  }, [coordinates]);
+
+  const finishAnnoCreate = () => {
+    setAnnotationMode(AnnotationMode.VIEW);
+
+    const newAnnotation = {
+      ...scaledAnnotation,
+      coordinates: coordinatesRef.current,
+    };
+
+    onFinishAnnoCreate(newAnnotation);
+  };
+
+  const getLabel = (labelId: number): Label | undefined => {
+    return possibleLabels.find((label: Label) => {
+      return label.id === labelId;
+    });
+  };
+
+  const getColor = () => {
+    if (!scaledAnnotation.labelIds || scaledAnnotation.labelIds.length == 0)
+      return colorUtils.getDefaultColor();
+
+    const label = getLabel(scaledAnnotation.labelIds[0]);
+
+    if (label === undefined || label.color === undefined)
+      return colorUtils.getDefaultColor();
+
+    return label.color;
+  };
+
+  const color = getColor();
+  const annotationStyle = {
+    stroke: color,
+    fill: color,
+    strokeWidth: strokeWidth / svgScale,
+    r: nodeRadius / svgScale,
+  };
+
+  const changeAnnoCoords = (newCoordinates: Point[]) => {
+    setCoordinates(newCoordinates);
+
+    let newCoordinatesWithoutMouse = newCoordinates;
+
+    // while adding/moving the annotation, the mouse cursor is the last point of the coordinates
+    // remove it before saving the annotation
+    if ([AnnotationMode.ADD, AnnotationMode.MOVE].includes(annotationMode)) {
+      // last point is mouse - remove it before export
+      newCoordinatesWithoutMouse = newCoordinates.slice(0, -1);
+    }
+
+    onAnnoChanged({
+      ...scaledAnnotation,
+      coordinates: newCoordinatesWithoutMouse,
+    });
+  };
+
+  const onMoving = (newCoords: Point[]) => {
+    if (annotationMode !== AnnotationMode.CREATE)
+      setAnnotationMode(AnnotationMode.MOVE);
+
+    setCoordinates(newCoords);
+  };
+
+  const onMoved = () => {
+    setAnnotationMode(AnnotationMode.VIEW);
+
+    // moving finished - send event to canvas
+    onAnnoChanged({
+      ...scaledAnnotation,
+      coordinates: coordinatesRef.current,
+    });
+  };
+
+  useEffect(() => {
+    onAnnotationModeChange(annotationMode);
+  }, [annotationMode]);
+
+  // apply coordinate changes from sia (e.g. out of image fixes)
+  // ignore outside changes while creating annotation
+  useEffect(() => {
+    if (annotationMode === AnnotationMode.CREATE) return;
+    setCoordinates(scaledAnnotation.coordinates);
+  }, [scaledAnnotation]);
+
+  const renderAnno = () => {
+    switch (scaledAnnotation.type) {
+      case AnnotationTool.Point:
+        return (
+          <PointTool
+            isSelected={isSelected}
+            annotationSettings={annotationSettings}
+            coordinates={coordinates[0]}
+            pageToStageOffset={pageToStageOffset}
+            svgScale={svgScale}
+            style={annotationStyle}
+            onMoving={(newPoint: Point) => {
+              setAnnotationMode(AnnotationMode.MOVE);
+              setCoordinates([newPoint]);
+            }}
+            onMoved={onMoved}
+            onIsDraggingStateChanged={setIsDragging}
+          />
+        );
+      case AnnotationTool.Line:
+        return (
+          <Line
+            annotationSettings={annotationSettings}
+            coordinates={coordinates}
+            isSelected={isSelected}
+            pageToStageOffset={pageToStageOffset}
+            annotationMode={annotationMode}
+            setAnnotationMode={setAnnotationMode}
+            svgScale={svgScale}
+            style={annotationStyle}
+            onAddNode={changeAnnoCoords}
+            onDeleteNode={changeAnnoCoords}
+            onMoving={onMoving}
+            onMoved={onMoved}
+            onIsDraggingStateChanged={setIsDragging}
+            onFinishAnnoCreate={finishAnnoCreate}
+          />
+        );
+      case AnnotationTool.BBox:
+        return (
+          <BBox
+            annotationMode={annotationMode}
+            annotationSettings={annotationSettings}
+            startCoords={coordinates[0]}
+            endCoords={coordinates[1]}
+            isSelected={isSelected}
+            pageToStageOffset={pageToStageOffset}
+            style={annotationStyle}
+            svgScale={svgScale}
+            onDeleteNode={() => {
+              console.log("TODO");
+            }}
+            onIsDraggingStateChanged={setIsDragging}
+            onFinishAnnoCreate={finishAnnoCreate}
+            onMoving={onMoving}
+            onMoved={onMoved}
+          />
+        );
+      case AnnotationTool.Polygon:
+        return (
+          <Polygon
+            annotationSettings={annotationSettings}
+            coordinates={coordinates}
+            isSelected={isSelected}
+            isDisabled={isDisabled}
+            pageToStageOffset={pageToStageOffset}
+            annotationMode={annotationMode}
+            setAnnotationMode={setAnnotationMode}
+            svgScale={svgScale}
+            style={annotationStyle}
+            onAddNode={changeAnnoCoords}
+            onDeleteNode={changeAnnoCoords}
+            onMoving={onMoving}
+            onMoved={onMoved}
+            onIsDraggingStateChanged={setIsDragging}
+            onFinishAnnoCreate={finishAnnoCreate}
+          />
+        );
+    }
+  };
+
+  return (
+    <g
+      // visibility={this.state.visibility}
+      // onClick={(e) => this.onClick(e)}
+      // onMouseDown={(e) => this.onMouseDown(e)}
+      // onContextMenu={(e) => this.onContextMenu(e)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onAction(scaledAnnotation, CanvasAction.ANNO_SELECTED);
+      }}
+    >
+      {!isDragging && annotationMode !== AnnotationMode.CREATE && (
+        <AnnoBar
+          annotationCoordinates={coordinates}
+          canLabel={annotationSettings.canLabel}
+          labels={possibleLabels}
+          color={color}
+          isSelected={isSelected}
+          selectedLabelIds={scaledAnnotation.labelIds}
+          style={annotationStyle}
+          svgScale={svgScale}
+          onLabelIconClicked={onLabelIconClicked}
+        />
+      )}
+      {renderAnno()}
+    </g>
+  );
+};
+
+export default AnnotationComponent;

package/src/Annotation/ui/atoms/AnnoBar.tsx

@@ -0,0 +1,132 @@
+import { CSSProperties, useEffect, useRef, useState } from "react";
+import Label from "../../../models/Label";
+import { Point } from "../../../types";
+import transform from "../../../utils/transform2";
+import DaviIcon from "./DaviIcon";
+
+const DEFAULT_FONT_SIZE = 10;
+const DEFAULT_RECT_HEIGHT = 15;
+const TEXT_PADDING = 3;
+
+type AnnoBarProps = {
+  annotationCoordinates: Point[];
+  canLabel: boolean;
+  color: string;
+  labels: Label[];
+  selectedLabelIds: number[];
+  isSelected: boolean;
+  svgScale: number;
+  style: CSSProperties;
+  onLabelIconClicked: (markerPosition: Point) => void;
+};
+const AnnoBar = ({
+  annotationCoordinates,
+  canLabel,
+  color,
+  labels,
+  selectedLabelIds = [],
+  isSelected,
+  svgScale,
+  style,
+  onLabelIconClicked,
+}: AnnoBarProps) => {
+  const [barPosition, setBarPosition] = useState<Point>({ x: 0, y: 0 });
+  const [barWidth, setBarWidth] = useState<number>(0);
+  const [barHeight, setBarHeight] = useState<number>(0);
+  const [fontSize, setFontSize] = useState<number>(0);
+  const [labelText, setLabelText] = useState<string>("");
+
+  const textRef = useRef(null);
+
+  useEffect(() => {
+    setLabelText(getLabelText());
+  }, [selectedLabelIds]);
+
+  useEffect(() => {
+    // get the most top left point from the annotation
+    const topPoints: Point[] = transform.getTopPoint(annotationCoordinates);
+    const topLeftPoint: Point = transform.getMostLeftPoints(topPoints)[0];
+
+    const newBarPosition: Point = {
+      x: topLeftPoint.x + 7 / svgScale,
+      y: topLeftPoint.y - 10 / svgScale,
+    };
+
+    setBarPosition(newBarPosition);
+
+    // calculate scaled font size
+    const newFontSize = Math.ceil(DEFAULT_FONT_SIZE / svgScale);
+    setFontSize(newFontSize);
+
+    setBarHeight(DEFAULT_RECT_HEIGHT / svgScale);
+  }, [svgScale]);
+
+  useEffect(() => {
+    if (textRef === undefined) return;
+
+    // calculate size of box around label text
+    const textElement: DOMRect = textRef.current.getBoundingClientRect();
+    const textWidth: number = textElement.width;
+    const rectWidth = (textWidth + TEXT_PADDING) / svgScale;
+
+    setBarWidth(rectWidth);
+  }, [textRef, labelText, fontSize]);
+
+  const getLabelText = () => {
+    const selectedLabels: Label[] = labels.filter((label: Label) =>
+      selectedLabelIds.includes(label.id),
+    );
+
+    const labelText = selectedLabels.map((l) => l.name).join(", ");
+
+    return labelText.length ? labelText : "no label";
+  };
+
+  return (
+    <g>
+      {isSelected && canLabel && (
+        <DaviIcon
+          x={barPosition.x - 33 / svgScale}
+          y={barPosition.y - 30 / svgScale}
+          color={color}
+          size={60 / svgScale}
+          onClick={() => onLabelIconClicked(barPosition)}
+        />
+      )}
+
+      <rect
+        x={barPosition.x}
+        y={barPosition.y - 6 / (svgScale * 1.2)}
+        width={barWidth}
+        height={barHeight}
+        rx={5 / svgScale}
+        opacity="0.5"
+        style={style}
+      />
+      <text
+        x={barPosition.x + 1 / svgScale}
+        y={barPosition.y + 6 / svgScale}
+        fill="white"
+        textAnchor="start"
+        alignmentBaseline="central"
+        ref={textRef}
+        fontSize={`${fontSize}pt`}
+      >
+        {labelText}
+      </text>
+      {/* This second rect is to prevent text from getting marked */}
+      <rect
+        x={barPosition.x}
+        y={barPosition.y - 6 / (svgScale * 1.2)}
+        width={barWidth}
+        height={DEFAULT_RECT_HEIGHT}
+        rx={5 / svgScale}
+        opacity="0.01"
+        style={style}
+        onContextMenu={(e) => e.preventDefault()}
+      />
+    </g>
+  );
+};
+
+export default AnnoBar;

package/src/Annotation/ui/atoms/DaviIcon.tsx

@@ -0,0 +1,57 @@
+type DaviIconProps = {
+  x: number;
+  y: number;
+  color: string;
+  size: number;
+  onClick?: () => void;
+};
+
+const DaviIcon = ({
+  x,
+  y,
+  color,
+  size = 60,
+  onClick = () => {},
+}: DaviIconProps) => {
+  const scale: number = size / 1400;
+
+  return (
+    <g
+      transform={`translate(${x} ${y}) scale(${scale})`}
+      fill={color}
+      onClick={onClick}
+    >
+      <path
+        id="Maps"
+        d="M620.561,817.217c-1.568-3.62-3.771-7.101-4.611-10.885
+                    c-24.452-109.811-74.341-207.569-139.215-298.675c-27.507-38.628-55.814-77.404-77.438-119.371
+                    C324.363,242.85,402.696,58.71,574.209,26.508c145.509-27.32,282.953,75.871,296.543,222.773
+                    c4.659,50.356-7.471,97.96-32.152,141.022c-27.812,48.526-58.75,95.364-90.073,141.758
+                    c-50.917,75.411-91.062,155.558-113.421,244.091c-2.438,9.652-3.936,19.543-6.271,29.227c-0.992,4.104-3.023,7.961-4.584,11.93
+                    C623.021,817.277,621.789,817.247,620.561,817.217z"
+      />
+      <path
+        id="Text"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        fill="#FFFFFF"
+        d="M724.709,250.898
+                    c-0.055-3.974,0.047-7.949,0.033-11.923c-0.007-1.228-1.54-2.767-2.76-2.777c-2.428-0.021-4.862-0.015-7.29-0.015
+                    c-22.466,0.001-44.934,0.005-67.404,0.009c-2.475,0.001-3.658,1.154-3.658,3.588c-0.001,47.365-0.001,94.73-0.001,142.096
+                    c0,13.526,0,27.05,0.001,40.577c0,2.305,1.274,3.584,3.562,3.59c6.623,0.004,9.256-0.07,19.873,0.004
+                    c10.618,0.072,14.146,8.543,14.146,14.189c-0.002,5.645-4.233,13.055-14.299,13.367c-13.135,0.061-26.277-0.02-39.414-0.014
+                    c-14.575,0.004-29.146,0.004-43.722,0.02c-4.191-0.084-13.717-2.789-13.717-13.492s6.233-13.643,13.132-14.117
+                    c4.979,0.037,13.802,0.057,20.701,0.049c1.695,0,3.11-1.537,3.11-3.361c0.003-13.912-0.004-27.823-0.004-41.736
+                    c0-30.252,0-60.503,0.002-90.754c0.002-17.03,0.005-33.649,0.002-50.678c0-1.991-1.38-3.336-3.396-3.336
+                    c-24.79,0-49.577,0-74.362,0c-2.133,0-3.38,1.22-3.383,3.308c-0.006,3.754-0.011,7.509,0.005,11.262
+                    c-0.023,6.339-3.067,13.143-12.456,13.143c-9.389,0-14.337-4.647-14.915-13.23c-0.128-4.305,0.004-8.612,0.004-12.918
+                    c0-8.392,0-16.781,0-25.173c0-0.321,0.228-5.156,4.091-9.277c3.864-4.122,8.014-3.822,8.445-3.822
+                    c25.835,0.003,51.672,0.002,77.507,0.002c46.813,0.001,140.443,0.001,140.443,0.001s6.153-0.088,10.926-0.052
+                    c0.3-0.008,5.713,0.363,9.178,3.994c3.46,3.631,3.046,8.407,3.046,8.635c-0.007,12.862,0.079,25.725-0.003,38.587
+                    c-0.074,8.051-6.938,12.819-13.703,12.847C731.482,263.519,724.956,259.059,724.709,250.898z"
+      />
+    </g>
+  );
+};
+
+export default DaviIcon;