fix(icon): improve autofix path

Author: adenvt

packages/persona-icon/font/persona-icon.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'Persona Icon';
-  src: url('../font/persona-icon.eot?6587e0b3');
-  src: url('../font/persona-icon.eot?6587e0b3#iefix') format('embedded-opentype'),
-       url('../font/persona-icon.woff2?257ac2c8') format('woff2'),
-       url('../font/persona-icon.woff?fa851bfd') format('woff'),
-       url('../font/persona-icon.ttf?c403a530') format('truetype'),
-       url('../font/persona-icon.svg?38d4d315#Persona%20Icon') format('svg');
+  src: url('../font/persona-icon.eot?167536ca');
+  src: url('../font/persona-icon.eot?167536ca#iefix') format('embedded-opentype'),
+       url('../font/persona-icon.woff2?033d4851') format('woff2'),
+       url('../font/persona-icon.woff?fc0bcfd8') format('woff'),
+       url('../font/persona-icon.ttf?71a4b6fd') format('truetype'),
+       url('../font/persona-icon.svg?4d4454fa#Persona%20Icon') format('svg');
   font-weight: normal;
   font-style: normal;
 }

packages/persona-icon/font/persona-icon.eot

@@ -95,8 +95,7 @@
       ""
     ],
     "width": 1000,
-    "height": 1000,
-    "color": "url(#b)"
+    "height": 1000
   },
   {
     "name": "admin-center-logo-apps",

packages/persona-icon/font/persona-icon.json

@@ -40,9 +40,9 @@
   "scripts": {
     "prepack": "yarn build",
     "build": "nuxt-module-build build",
-    "lint": "jiti scripts/lint.ts",
-    "sync": "jiti scripts/sync.ts",
-    "changelog": "jiti scripts/changelog.ts"
+    "lint": "node --import jiti/register scripts/lint.ts",
+    "sync": "node --import jiti/register scripts/sync.ts",
+    "changelog": "node --import jiti/register scripts/changelog.ts"
   },
   "devDependencies": {
     "@nuxt/module-builder": "1.0.1",

packages/persona-icon/font/persona-icon.svg

@@ -7,36 +7,32 @@ type Point = ReturnType<typeof SVGPath['getPointAtLength']>
 export function fixPath (d: string): string {
   const path  = SVGPath.normalizePath(d)
   const paths = sortPaths(SVGPath.splitPath(path))
+  const root  = new PathTree()
 
-  for (const [i, cur] of paths.entries()) {
-    if (i > 0) {
-      const outer = paths[0]
-      const prev  = paths[i - 1]
+  for (const p of paths)
+    root.addChild(new PathTree(p))
 
-      const needRotate = (isInside(cur, prev) && isClockwise(cur) === isClockwise(prev))
-        || (isInside(cur, outer) && isClockwise(cur) === isClockwise(outer))
+  const nodes               = [...root.children]
+  const result: PathArray[] = []
 
-      if (needRotate)
-        paths[i] = SVGPath.reversePath(cur)
-    }
-  }
+  while (nodes.length > 0) {
+    const node = nodes.shift()
 
-  return SVGPath.pathToString(paths.flat() as PathArray)
-}
+    if (!node)
+      break
 
-function isInside (inner: PathArray, outer: PathArray) {
-  return isInBox(inner, outer)
-    && isInPolygon(inner, outer)
-}
+    if (node.value) {
+      if (node.parent && node.parent.dir === node.dir)
+        node.reverse()
 
-function isInBox (inner: PathArray, outer: PathArray) {
-  const outerBox = SVGPath.getPathBBox(outer)
-  const innerBox = SVGPath.getPathBBox(inner)
+      result.push(node.value)
+    }
+
+    if (node.children.size > 0)
+      nodes.push(...node.children)
+  }
 
-  return innerBox.x >= outerBox.x
-    && innerBox.y >= outerBox.y
-    && (innerBox.x + innerBox.width) <= (outerBox.x + outerBox.width)
-    && (innerBox.y + innerBox.height) <= (outerBox.y + outerBox.height)
+  return SVGPath.pathToString(result.flat(1) as PathArray)
 }
 
 function isInPolygon (inner: PathArray, outer: PathArray) {
@@ -63,13 +59,25 @@ function getPolygon (path: PathArray, precission = 30) {
   const length          = SVGPath.getTotalLength(path)
 
   for (let i = 1; i <= precission; i++)
-    points.push(SVGPath.getPointAtLength(path, length * (i / precission)))
+    points.push(SVGPath.getPointAtLength(path, Math.round(length * (i / precission))))
 
   return points
 }
 
 function isClockwise (path: PathArray) {
-  return SVGPath.getDrawDirection(path)
+  const points = getPolygon(path)
+  const n      = points.length
+
+  let area = 0
+
+  for (let i = 0; i < n; i++) {
+    const p1 = points[i]
+    const p2 = points[(i + 1) % n]
+
+    area += (p1.x * p2.y - p2.x * p1.y)
+  }
+
+  return (area / 2) < 0
 }
 
 function sortPaths (paths: PathArray[]): PathArray[] {
@@ -90,3 +98,100 @@ function sortPaths (paths: PathArray[]): PathArray[] {
       return paths[box.index]
     })
 }
+
+interface PathTreeJSON {
+  value?: string,
+  dir?: 'cw' | 'ccw',
+  area?: number,
+  children: PathTreeJSON[],
+}
+
+export class PathTree {
+  parent?: PathTree
+  value?: PathArray
+  children: Set<PathTree>
+
+  constructor (path?: PathArray) {
+    this.value    = path
+    this.children = new Set()
+  }
+
+  addChild (cur: PathTree) {
+    if (this.value && this.compare(cur) === -1) {
+      this.setParent(cur)
+
+      return this
+    }
+
+    for (const child of this.children) {
+      const c = child.compare(cur)
+
+      if (c === -1) {
+        child.setParent(child)
+
+        return this
+      }
+
+      if (c === 1) {
+        child.addChild(cur)
+
+        return this
+      }
+    }
+
+    this.children.add(cur)
+
+    cur.parent = this
+
+    return this
+  }
+
+  setParent (parent: PathTree) {
+    if (this.parent)
+      this.parent.children.delete(this)
+
+    parent.addChild(this)
+
+    this.parent = parent
+
+    return this
+  }
+
+  get area () {
+    if (this.value)
+      return SVGPath.getPathArea(this.value)
+  }
+
+  get dir () {
+    if (this.value)
+      return isClockwise(this.value) ? 'cw' : 'ccw'
+  }
+
+  compare (other: PathTree) {
+    if (this.value && other.value) {
+      if (isInPolygon(other.value, this.value))
+        return 1
+
+      if (isInPolygon(this.value, other.value))
+        return -1
+    }
+
+    return 0
+  }
+
+  reverse () {
+    if (this.value)
+      this.value = SVGPath.reversePath(this.value)
+
+    return this
+  }
+
+  toJSON (): PathTreeJSON {
+    return {
+      value   : this.value ? SVGPath.pathToString(this.value) : undefined,
+      dir     : this.dir,
+      area    : this.area,
+      children: Array.from(this.children, (c) => c.toJSON()),
+    }
+  }
+}

packages/persona-icon/font/persona-icon.ttf

@@ -0,0 +1,65 @@
+import { fixPath } from './fix-svg.js'
+import { hash } from 'ohash'
+
+export default {
+  plugins: [
+    {
+      name: 'remove-clip-path',
+      fn  : () => {
+        return {
+          element: {
+            exit (node, parentNode) {
+              if (node.name === 'g' && node.attributes['clip-path']) {
+                parentNode.children = node.children.map((child) => {
+                  if (child.type === 'element')
+                    node.attributes.fill = 'currentColor'
+
+                  return child
+                })
+              }
+            },
+          },
+        }
+      },
+    },
+    {
+      name: 'fix-path',
+      fn  : () => {
+        return {
+          element: {
+            enter (node) {
+              if (node.name === 'path') {
+                if (node.attributes.d)
+                  node.attributes.d = fixPath(node.attributes.d)
+
+                if (node.attributes.fill && node.attributes.fill !== 'none' && !node.attributes.fill.startsWith('url'))
+                  node.attributes.fill = 'currentColor'
+              }
+            },
+          },
+        }
+      },
+    },
+    {
+      name  : 'addClassesToSVGElement',
+      params: { className: 'persona-icon' },
+    },
+    {
+      name  : 'addAttributesToSVGElement',
+      params: { attributes: [{ focusable: 'false' }] },
+    },
+    {
+      name  : 'preset-default',
+      params: { overrides: { removeViewBox: false } },
+    },
+    {
+      name  : 'prefixIds',
+      params: {
+        delim           : '_',
+        prefix          : (_, info) => info.path ? hash(info.path) : '',
+        prefixClassNames: false,
+        prefixIds       : true,
+      },
+    },
+  ],
+}