@dicebear/pixel-art - npm Package Compare versions

Comparing version 5.0.0-alpha.31 to 5.0.0-alpha.32

lib/components/accessories.js

 import { escape } from '@dicebear/core';
 export const accessories = {
-    variant04: (components, colors) => `<path d="M2 7h1v1H2zM13 7h1v1h-1z" fill="${escape.xml(colors.accessories.value)}"/>`,
-    variant03: (components, colors) => `<path d="M13 7h1v2h-1zM2 7h1v2H2z" fill="${escape.xml(colors.accessories.value)}"/>`,
-    variant02: (components, colors) => `<path fill="${escape.xml(colors.accessories.value)}" d="M13 7h1v2h-1zM2 7h1v2H2z"/><path fill="none" d="M2 7h1v1H2zM13 7h1v1h-1z"/>`,
-    variant01: (components, colors) => `<path d="M13 7h2v2h-2zM1 7h2v2H1z" fill="${escape.xml(colors.accessories.value)}"/>`,
+    variant04: (components, colors) => `<path d="M2 7h1v1H2zM13 7h1v1h-1z" fill="${escape.xml(`#${colors.accessories}`)}"/>`,
+    variant03: (components, colors) => `<path d="M13 7h1v2h-1zM2 7h1v2H2z" fill="${escape.xml(`#${colors.accessories}`)}"/>`,
+    variant02: (components, colors) => `<path fill="${escape.xml(`#${colors.accessories}`)}" d="M13 7h1v2h-1zM2 7h1v2H2z"/><path fill="#fff" fill-opacity=".5" d="M2 7h1v1H2zM13 7h1v1h-1z"/>`,
+    variant01: (components, colors) => `<path d="M13 7h2v2h-2zM1 7h2v2H1z" fill="${escape.xml(`#${colors.accessories}`)}"/>`,
 };

lib/components/beard.js

 import { escape } from '@dicebear/core';
 export const beard = {
-    variant08: (components, colors) => `<path d="M3 6h1v3h8V6h1v5h-1v1H4v-1H3V6Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    variant07: (components, colors) => `<path d="M3 9v2h1v1h8v-1h1V9H3Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    variant06: (components, colors) => `<path d="M3 9h3v1h4V9h3v2h-1v1H4v-1H3V9Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    variant05: (components, colors) => `<path d="M3 6h1v2h1v1h6V8h1V6h1v5h-1v1H4v-1H3V6Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    variant04: (components, colors) => `<path fill="${escape.xml(colors.hair.value)}" d="M6 11h4v1H6z"/>`,
-    variant03: (components, colors) => `<path d="M3 9h2v1h6V9h2v2h-1v2h-1v1H5v-1H4v-2H3V9Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    variant02: (components, colors) => `<path d="M5 11h6v1h-1v1H9v1H7v-1H6v-1H5v-1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    variant01: (components, colors) => `<path d="M3 8h2v1h1v1h4V9h1V8h2v3h-1v1H4v-1H3V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
+    variant08: (components, colors) => `<path opacity=".9" d="M3 6h1v3h8V6h1v5h-1v1H4v-1H3V6Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    variant07: (components, colors) => `<path opacity=".9" d="M3 9v2h1v1h8v-1h1V9H3Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    variant06: (components, colors) => `<path opacity=".9" d="M3 9h3v1h4V9h3v2h-1v1H4v-1H3V9Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    variant05: (components, colors) => `<path opacity=".9" d="M3 6h1v2h1v1h6V8h1V6h1v5h-1v1H4v-1H3V6Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    variant04: (components, colors) => `<path opacity=".9" fill="${escape.xml(`#${colors.hair}`)}" d="M6 11h4v1H6z"/>`,
+    variant03: (components, colors) => `<path opacity=".9" d="M3 9h2v1h6V9h2v2h-1v2h-1v1H5v-1H4v-2H3V9Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    variant02: (components, colors) => `<path opacity=".9" d="M5 11h6v1h-1v1H9v1H7v-1H6v-1H5v-1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    variant01: (components, colors) => `<path opacity=".9" d="M3 8h2v1h1v1h4V9h1V8h2v3h-1v1H4v-1H3V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
 };

lib/components/clothing.js

 import { escape } from '@dicebear/core';
 export const clothing = {
-    variant23: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M4 13h1v3H4zM11 13h1v3h-1z"/>`,
-    variant22: (components, colors) => `<path d="M6 13H4v3h2v-3ZM12 13h-2v3h2v-3Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M5 13h1v3H5zM10 13h1v3h-1z"/>`,
-    variant21: (components, colors) => `<path d="M5 13H4v3h3v-1H6v-1H5v-1ZM12 13h-1v1h-1v1H9v1h3v-3Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M4 13h1v1H4zM5 14h1v1H5zM6 15h1v1H6zM9 15h1v1H9zM10 14h1v1h-1zM11 14h1v1h-1zM11 13h1v1h-1zM10 15h1v1h-1zM5 15h1v1H5zM4 14h1v1H4z"/>`,
-    variant20: (components, colors) => `<path fill="${escape.xml(colors.clothing.value)}" d="M4 14h8v2H4z"/><path fill="none" d="M4 14h1v2H4zM11 14h1v2h-1z"/>`,
-    variant19: (components, colors) => `<path d="M4 13h1v1h6v-1h1v3H4v-3Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M9 15h2v1H9z"/>`,
-    variant18: (components, colors) => `<path d="M4 13h2v1h1v1h2v-1h1v-1h2v3H4v-3Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M10 14h1v1h-1zM11 13h1v1h-1zM9 15h1v1H9zM9 14h1v1H9zM10 13h1v1h-1zM8 15h1v1H8zM6 14H5v1h1zM5 13H4v1h1zM7 15H6v1h1zM7 14H6v1h1zM6 13H5v1h1zM8 15H7v1h1z"/>`,
-    variant17: (components, colors) => `<path d="M4 13h2v1h1v1h2v-1h1v-1h2v1h1v2H3v-2h1v-1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant16: (components, colors) => `<path d="M5 13H3v1H2v2h5v-1H6v-1H5v-1ZM13 13h-2v1h-1v1H9v1h5v-2h-1v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M11 13h1v1h-1zM10 14h1v1h-1zM9 15h1v1H9zM6 15h1v1H6zM5 14h1v1H5zM4 13h1v1H4z"/>`,
-    variant15: (components, colors) => `<path d="M6 14H4v1H3v1h4v-1H6v-1ZM12 15h1v1H9v-1h1v-1h2v1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant14: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1h-1v1H6v-1H5v-1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant13: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1H5v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M2 14h1v2H2zM6 14h1v2H6zM8 14h1v2H8zM10 14h1v2h-1zM4 13h1v3H4zM12 13h1v3h-1z"/>`,
-    variant12: (components, colors) => `<path d="M7 12h2v1h4v1h1v2H2v-2h1v-1h4v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M7 12h2v1H7z"/>`,
-    variant11: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h1v1h2v-1h1v-1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant10: (components, colors) => `<path d="M4 13h1v1h6v-1h1v1h1v2H3v-2h1v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M9 15h2v1H9z"/>`,
-    variant09: (components, colors) => `<path d="M4 13h1v2h6v-2h1v2h1v1H3v-1h1v-2Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M4 13h1v2H4zM11 13h1v2h-1z"/>`,
-    variant08: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v2h4v-2Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant07: (components, colors) => `<path d="M5 13H4v3h3v-1H6v-1H5v-1ZM12 13h-1v1h-1v1H9v1h3v-3Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant06: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M3 13h1v1H3zM2 14h1v1H2zM3 15h1v1H3zM4 14h1v1H4zM5 13h1v1H5zM5 15h1v1H5zM6 14h1v1H6zM7 15h1v1H7zM8 14h1v1H8zM9 15h1v1H9zM10 14h1v1h-1zM11 15h1v1h-1zM11 13h1v1h-1zM12 14h1v1h-1zM13 15h1v1h-1z"/>`,
-    variant05: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1h-1v1H6v-1H5v-1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant04: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1H5v-1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant03: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(colors.clothing.value)}"/>`,
-    variant02: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v2h4v-2Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M5 14h1v1H5zM4 15h1v1H4zM7 15h1v1H7zM3 13h1v1H3zM2 14h1v1H2zM12 13h1v1h-1zM11 14h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1z"/>`,
-    variant01: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(colors.clothing.value)}"/><path fill="none" d="M11 14h1v2h-1zM4 14h1v2H4z"/>`,
+    variant23: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".2" d="M4 13h1v3H4zM11 13h1v3h-1z"/>`,
+    variant22: (components, colors) => `<path d="M6 13H4v3h2v-3ZM12 13h-2v3h2v-3Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".2" d="M5 13h1v3H5zM10 13h1v3h-1z"/>`,
+    variant21: (components, colors) => `<path d="M5 13H4v3h3v-1H6v-1H5v-1ZM12 13h-1v1h-1v1H9v1h3v-3Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".5" d="M4 13h1v1H4zM5 14h1v1H5zM6 15h1v1H6zM9 15h1v1H9zM10 14h1v1h-1z"/><path fill="#fff" fill-opacity=".3" d="M11 14h1v1h-1z"/><path fill="#fff" fill-opacity=".5" d="M11 13h1v1h-1z"/><path fill="#fff" fill-opacity=".3" d="M10 15h1v1h-1zM5 15h1v1H5zM4 14h1v1H4z"/>`,
+    variant20: (components, colors) => `<path fill="${escape.xml(`#${colors.clothing}`)}" d="M4 14h8v2H4z"/><path fill="#fff" fill-opacity=".3" d="M4 14h1v2H4zM11 14h1v2h-1z"/>`,
+    variant19: (components, colors) => `<path d="M4 13h1v1h6v-1h1v3H4v-3Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".3" d="M9 15h2v1H9z"/>`,
+    variant18: (components, colors) => `<path d="M4 13h2v1h1v1h2v-1h1v-1h2v3H4v-3Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".3" d="M10 14h1v1h-1zM11 13h1v1h-1zM9 15h1v1H9z"/><path fill="#fff" fill-opacity=".5" d="M9 14h1v1H9zM10 13h1v1h-1zM8 15h1v1H8z"/><path fill="#fff" fill-opacity=".3" d="M6 14H5v1h1zM5 13H4v1h1zM7 15H6v1h1z"/><path fill="#fff" fill-opacity=".5" d="M7 14H6v1h1zM6 13H5v1h1zM8 15H7v1h1z"/>`,
+    variant17: (components, colors) => `<path d="M4 13h2v1h1v1h2v-1h1v-1h2v1h1v2H3v-2h1v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant16: (components, colors) => `<path d="M5 13H3v1H2v2h5v-1H6v-1H5v-1ZM13 13h-2v1h-1v1H9v1h5v-2h-1v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".3" d="M11 13h1v1h-1zM10 14h1v1h-1zM9 15h1v1H9zM6 15h1v1H6zM5 14h1v1H5zM4 13h1v1H4z"/>`,
+    variant15: (components, colors) => `<path d="M6 14H4v1H3v1h4v-1H6v-1ZM12 15h1v1H9v-1h1v-1h2v1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant14: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1h-1v1H6v-1H5v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant13: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1H5v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".3" d="M2 14h1v2H2zM6 14h1v2H6zM8 14h1v2H8zM10 14h1v2h-1zM4 13h1v3H4zM12 13h1v3h-1z"/>`,
+    variant12: (components, colors) => `<path d="M7 12h2v1h4v1h1v2H2v-2h1v-1h4v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#000" fill-opacity=".3" d="M7 12h2v1H7z"/>`,
+    variant11: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h1v1h2v-1h1v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant10: (components, colors) => `<path d="M4 13h1v1h6v-1h1v1h1v2H3v-2h1v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".5" d="M9 15h2v1H9z"/>`,
+    variant09: (components, colors) => `<path d="M4 13h1v2h6v-2h1v2h1v1H3v-1h1v-2Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".2" d="M4 13h1v2H4zM11 13h1v2h-1z"/>`,
+    variant08: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v2h4v-2Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant07: (components, colors) => `<path d="M5 13H4v3h3v-1H6v-1H5v-1ZM12 13h-1v1h-1v1H9v1h3v-3Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant06: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".2" d="M3 13h1v1H3zM2 14h1v1H2zM3 15h1v1H3zM4 14h1v1H4zM5 13h1v1H5zM5 15h1v1H5zM6 14h1v1H6zM7 15h1v1H7zM8 14h1v1H8zM9 15h1v1H9zM10 14h1v1h-1zM11 15h1v1h-1zM11 13h1v1h-1zM12 14h1v1h-1zM13 15h1v1h-1z"/>`,
+    variant05: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1h-1v1H6v-1H5v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant04: (components, colors) => `<path d="M5 13H3v1H2v2h12v-2h-1v-1h-2v1H5v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant03: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/>`,
+    variant02: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v2h4v-2Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".2" d="M5 14h1v1H5zM4 15h1v1H4zM7 15h1v1H7zM3 13h1v1H3zM2 14h1v1H2zM12 13h1v1h-1zM11 14h1v1h-1zM10 15h1v1h-1zM13 15h1v1h-1z"/>`,
+    variant01: (components, colors) => `<path d="M10 13h3v1h1v2H2v-2h1v-1h3v1h4v-1Z" fill="${escape.xml(`#${colors.clothing}`)}"/><path fill="#fff" fill-opacity=".2" d="M11 14h1v2h-1zM4 14h1v2H4z"/>`,
 };

lib/components/eyes.js

 import { escape } from '@dicebear/core';
 export const eyes = {
-    variant12: (components, colors) => `<g clip-rule="evenodd"><path fill-rule="evenodd" d="M5 6h1v2H4V7h1V6Zm5 0h1v2H9V7h1V6Z" fill="#fff"/><path fill-rule="evenodd" d="M6 6v1H5v1h2V6H6Zm5 0v1h-1v1h2V6h-1Z" fill="${escape.xml(colors.eyes.value)}"/><path d="M6 6v1h1V6H6ZM5 7v1h1V7H5Zm6-1v1h1V6h-1Zm-1 1v1h1V7h-1Z" fill="none"/></g>`,
-    variant11: (components, colors) => `<path fill="#fff" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(colors.eyes.value)}" d="M4 6h2v1H4zM9 6h2v1H9z"/><path fill="#fff" d="M4 6h1v1H4zM9 6h1v1H9z"/>`,
-    variant10: (components, colors) => `<path fill="#fff" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(colors.eyes.value)}" d="M10 5h2v2h-2zM5 5h2v2H5z"/><path fill="none" d="M5 5h1v1H5zM6 6h1v1H6zM10 5h1v1h-1zM11 6h1v1h-1z"/><path fill="#fff" d="M11 5h1v1h-1zM6 5h1v1H6z"/>`,
-    variant09: (components, colors) => `<path fill="#fff" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(colors.eyes.value)}" d="M10 6h1v1h-1zM5 6h1v1H5z"/>`,
-    variant08: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4zM9 5h3v2H9z"/><path fill="${escape.xml(colors.eyes.value)}" d="M9 6h1v1H9zM4 6h1v1H4z"/>`,
-    variant07: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4zM9 5h3v2H9z"/><path fill="${escape.xml(colors.eyes.value)}" d="M11 6h1v1h-1zM6 6h1v1H6z"/>`,
-    variant06: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4z"/><path fill="${escape.xml(colors.eyes.value)}" d="M5 6h1v1H5z"/><path fill="#fff" d="M9 5h3v2H9z"/><path fill="${escape.xml(colors.eyes.value)}" d="M10 6h1v1h-1z"/>`,
-    variant05: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4zM9 5h3v2H9z"/><path d="M11 5h-1v1H9v1h3V6h-1V5Z" fill="${escape.xml(colors.eyes.value)}"/><path fill="none" d="M9 6h1v1H9zM10 5h1v1h-1zM11 6h1v1h-1z"/><path d="M6 5H5v1H4v1h3V6H6V5Z" fill="${escape.xml(colors.eyes.value)}"/><path fill="none" d="M4 6h1v1H4zM5 5h1v1H5zM6 6h1v1H6z"/>`,
-    variant04: (components, colors) => `<path d="M6 5H5v2h2V6H6V5ZM11 5h-1v2h2V6h-1V5Z" fill="#fff"/><path fill="${escape.xml(colors.eyes.value)}" d="M5 6h1v1H5zM10 6h1v1h-1z"/>`,
-    variant03: (components, colors) => `<path d="M10 5h1v2H9V6h1V5ZM5 5h1v2H4V6h1V5Z" fill="#fff"/><path fill="${escape.xml(colors.eyes.value)}" d="M11 6h-1v1h1zM6 6H5v1h1z"/>`,
-    variant02: (components, colors) => `<g clip-rule="evenodd"><path fill-rule="evenodd" d="M11 5h-1v2h2V6h-1V5ZM6 5H5v2h2V6H6V5Z" fill="#fff"/><path fill-rule="evenodd" d="M10 5v1h1v1H9V5h1ZM5 5v1h1v1H4V5h1Z" fill="${escape.xml(colors.eyes.value)}"/><path d="M10 5v1H9V5h1Zm1 1v1h-1V6h1ZM5 5v1H4V5h1Zm1 1v1H5V6h1Z" fill="none"/></g>`,
-    variant01: (components, colors) => `<path fill="#fff" d="M12 5H9v3h3zM7 5H4v3h3z"/><path fill="${escape.xml(colors.eyes.value)}" d="M12 6h-2v1h2zM7 6H5v1h2z"/><path fill="#fff" d="M12 6h-1v1h1zM7 6H6v1h1z"/>`,
+    variant12: (components, colors) => `<g fill-rule="evenodd" clip-rule="evenodd"><path d="M5 6h1v2H4V7h1V6Zm5 0h1v2H9V7h1V6Z" fill="#fff"/><path d="M6 6v1H5v1h2V6H6Zm5 0v1h-1v1h2V6h-1Z" fill="${escape.xml(`#${colors.eyes}`)}"/><path d="M6 6v1h1V6H6ZM5 7v1h1V7H5Zm6-1v1h1V6h-1Zm-1 1v1h1V7h-1Z" fill="#fff" fill-opacity=".5"/></g>`,
+    variant11: (components, colors) => `<path fill="#fff" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M4 6h2v1H4zM9 6h2v1H9z"/><path fill="#fff" fill-opacity=".7" d="M4 6h1v1H4zM9 6h1v1H9z"/>`,
+    variant10: (components, colors) => `<path fill="#fff" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M10 5h2v2h-2zM5 5h2v2H5z"/><path fill="#fff" fill-opacity=".4" d="M5 5h1v1H5zM6 6h1v1H6zM10 5h1v1h-1zM11 6h1v1h-1z"/><path fill="#fff" fill-opacity=".7" d="M11 5h1v1h-1zM6 5h1v1H6z"/>`,
+    variant09: (components, colors) => `<path fill="#fff" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M10 6h1v1h-1zM5 6h1v1H5z"/>`,
+    variant08: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4zM9 5h3v2H9z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M9 6h1v1H9zM4 6h1v1H4z"/>`,
+    variant07: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4zM9 5h3v2H9z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M11 6h1v1h-1zM6 6h1v1H6z"/>`,
+    variant06: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M5 6h1v1H5z"/><path fill="#fff" d="M9 5h3v2H9z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M10 6h1v1h-1z"/>`,
+    variant05: (components, colors) => `<path fill="#fff" d="M4 5h3v2H4zM9 5h3v2H9z"/><path d="M11 5h-1v1H9v1h3V6h-1V5Z" fill="${escape.xml(`#${colors.eyes}`)}"/><path fill="#fff" fill-opacity=".5" d="M9 6h1v1H9zM10 5h1v1h-1zM11 6h1v1h-1z"/><path d="M6 5H5v1H4v1h3V6H6V5Z" fill="${escape.xml(`#${colors.eyes}`)}"/><path fill="#fff" fill-opacity=".5" d="M4 6h1v1H4zM5 5h1v1H5zM6 6h1v1H6z"/>`,
+    variant04: (components, colors) => `<path d="M6 5H5v2h2V6H6V5ZM11 5h-1v2h2V6h-1V5Z" fill="#fff"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M5 6h1v1H5zM10 6h1v1h-1z"/>`,
+    variant03: (components, colors) => `<path d="M10 5h1v2H9V6h1V5ZM5 5h1v2H4V6h1V5Z" fill="#fff"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M11 6h-1v1h1zM6 6H5v1h1z"/>`,
+    variant02: (components, colors) => `<g fill-rule="evenodd" clip-rule="evenodd"><path d="M11 5h-1v2h2V6h-1V5ZM6 5H5v2h2V6H6V5Z" fill="#fff"/><path d="M10 5v1h1v1H9V5h1ZM5 5v1h1v1H4V5h1Z" fill="${escape.xml(`#${colors.eyes}`)}"/><path d="M10 5v1H9V5h1Zm1 1v1h-1V6h1ZM5 5v1H4V5h1Zm1 1v1H5V6h1Z" fill="#fff" fill-opacity=".5"/></g>`,
+    variant01: (components, colors) => `<path fill="#fff" d="M12 5H9v3h3zM7 5H4v3h3z"/><path fill="${escape.xml(`#${colors.eyes}`)}" d="M12 6h-2v1h2zM7 6H5v1h2z"/><path fill="#fff" fill-opacity=".7" d="M12 6h-1v1h1zM7 6H6v1h1z"/>`,
 };

lib/components/glasses.js

 import { escape } from '@dicebear/core';
 export const glasses = {
-    light07: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4H9v1H7V4H4v1H2v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5h-2V4Zm0 1v3H9V5h3ZM7 8H4V5h3v3Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M9 5h3v3H9zM4 5h3v3H4zM2 5h1v1H2zM13 5h1v1h-1z"/>`,
-    light06: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H2Zm10 3H9V6h3v2ZM7 8H4V6h3v2Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M9 6h3v2H9zM4 6h3v2H4zM7 5h2v1H7zM2 5h2v1H2zM12 5h2v1h-2z"/>`,
-    light05: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H9v1H7V5H2Zm5 1v2H4V6h3Zm2 0v2h3V6H9Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M4 6h3v2H4zM9 6h3v2H9zM2 5h2v1H2zM12 5h2v1h-2z"/>`,
-    light04: (components, colors) => `<path fill="none" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(colors.glasses.value)}" d="M3 5h1v1H3zM7 5h2v1H7zM12 5h1v1h-1z"/>`,
-    light03: (components, colors) => `<path fill="${escape.xml(colors.glasses.value)}" d="M2 5h12v1H2zM3 7h10v1H3zM3 6h1v1H3zM12 6h1v1h-1z"/><path fill="none" d="M4 6h8v1H4zM2 5h1v1H2zM13 5h1v1h-1z"/><path fill="none" d="M7 6h2v1H7z"/>`,
-    light02: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M14 5H2v1h1v2h4V7h2v1h4V6h1V5Zm-2 1H9v1h3V6ZM7 7H4V6h3v1Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M4 6h3v1H4zM2 5h1v1H2zM7 5h2v1H7zM13 5h1v1h-1zM9 6h3v1H9z"/>`,
-    light01: (components, colors) => `<path d="M2 5h5v1H4v1H3V6H2V5ZM7 7v1H4V7h3ZM9 7H7V6h2v1ZM12 7H9v1h3V7ZM12 6H9V5h5v1h-1v1h-1V6Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M4 6h3v1H4zM9 6h3v1H9zM12 5h2v1h-2zM2 5h2v1H2zM7 6h2v1H7z"/>`,
-    dark07: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4H9v1H7V4H4v1H2v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5h-2V4Zm0 1v3H9V5h3ZM7 8H4V5h3v3Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M9 5h3v3H9zM4 5h3v3H4zM2 5h1v1H2zM13 5h1v1h-1z"/>`,
-    dark06: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H2Zm10 3H9V6h3v2ZM7 8H4V6h3v2Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M9 6h3v2H9zM4 6h3v2H4zM7 5h2v1H7zM2 5h2v1H2zM12 5h2v1h-2z"/>`,
-    dark05: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H9v1H7V5H2Zm5 1v2H4V6h3Zm2 0v2h3V6H9Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M4 6h3v2H4zM9 6h3v2H9zM2 5h2v1H2zM12 5h2v1h-2z"/>`,
-    dark04: (components, colors) => `<path fill="none" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(colors.glasses.value)}" d="M3 5h1v1H3zM7 5h2v1H7zM12 5h1v1h-1z"/>`,
-    dark03: (components, colors) => `<path fill="${escape.xml(colors.glasses.value)}" d="M2 5h12v1H2zM3 7h10v1H3zM3 6h1v1H3zM12 6h1v1h-1z"/><path fill="none" d="M4 6h8v1H4zM2 5h1v1H2zM13 5h1v1h-1z"/><path fill="none" d="M7 6h2v1H7z"/>`,
-    dark02: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M14 5H2v1h1v2h4V7h2v1h4V6h1V5Zm-2 1H9v1h3V6ZM7 7H4V6h3v1Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M4 6h3v1H4zM2 5h1v1H2zM7 5h2v1H7zM13 5h1v1h-1zM9 6h3v1H9z"/>`,
-    dark01: (components, colors) => `<path d="M2 5h5v1H4v1H3V6H2V5ZM7 7v1H4V7h3ZM9 7H7V6h2v1ZM12 7H9v1h3V7ZM12 6H9V5h5v1h-1v1h-1V6Z" fill="${escape.xml(colors.glasses.value)}"/><path fill="none" d="M4 6h3v1H4zM9 6h3v1H9zM12 5h2v1h-2zM2 5h2v1H2zM7 6h2v1H7z"/>`,
+    light07: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4H9v1H7V4H4v1H2v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5h-2V4Zm0 1v3H9V5h3ZM7 8H4V5h3v3Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#fff" fill-opacity=".3" d="M9 5h3v3H9zM4 5h3v3H4z"/><path fill="#fff" fill-opacity=".2" d="M2 5h1v1H2zM13 5h1v1h-1z"/>`,
+    light06: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H2Zm10 3H9V6h3v2ZM7 8H4V6h3v2Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#fff" fill-opacity=".3" d="M9 6h3v2H9zM4 6h3v2H4z"/><path fill="#fff" fill-opacity=".2" d="M7 5h2v1H7zM2 5h2v1H2zM12 5h2v1h-2z"/>`,
+    light05: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H9v1H7V5H2Zm5 1v2H4V6h3Zm2 0v2h3V6H9Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#fff" fill-opacity=".3" d="M4 6h3v2H4zM9 6h3v2H9z"/><path fill="#fff" fill-opacity=".2" d="M2 5h2v1H2zM12 5h2v1h-2z"/>`,
+    light04: (components, colors) => `<path fill="#fff" fill-opacity=".3" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(`#${colors.glasses}`)}" d="M3 5h1v1H3zM7 5h2v1H7zM12 5h1v1h-1z"/>`,
+    light03: (components, colors) => `<path fill="${escape.xml(`#${colors.glasses}`)}" d="M2 5h12v1H2zM3 7h10v1H3zM3 6h1v1H3zM12 6h1v1h-1z"/><path fill="#fff" fill-opacity=".3" d="M4 6h8v1H4z"/><path fill="#fff" fill-opacity=".2" d="M2 5h1v1H2zM13 5h1v1h-1z"/><path fill="#000" fill-opacity=".3" d="M7 6h2v1H7z"/>`,
+    light02: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M14 5H2v1h1v2h4V7h2v1h4V6h1V5Zm-2 1H9v1h3V6ZM7 7H4V6h3v1Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#fff" fill-opacity=".3" d="M4 6h3v1H4z"/><path fill="#fff" fill-opacity=".2" d="M2 5h1v1H2zM7 5h2v1H7zM13 5h1v1h-1z"/><path fill="#fff" fill-opacity=".3" d="M9 6h3v1H9z"/>`,
+    light01: (components, colors) => `<path d="M2 5h5v1H4v1H3V6H2V5ZM7 7v1H4V7h3ZM9 7H7V6h2v1ZM12 7H9v1h3V7ZM12 6H9V5h5v1h-1v1h-1V6Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#fff" fill-opacity=".3" d="M4 6h3v1H4zM9 6h3v1H9z"/><path fill="#fff" fill-opacity=".2" d="M12 5h2v1h-2zM2 5h2v1H2zM7 6h2v1H7z"/>`,
+    dark07: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4H9v1H7V4H4v1H2v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5h-2V4Zm0 1v3H9V5h3ZM7 8H4V5h3v3Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#000" fill-opacity=".3" d="M9 5h3v3H9zM4 5h3v3H4z"/><path fill="#fff" fill-opacity=".2" d="M2 5h1v1H2zM13 5h1v1h-1z"/>`,
+    dark06: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H2Zm10 3H9V6h3v2ZM7 8H4V6h3v2Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#000" fill-opacity=".3" d="M9 6h3v2H9zM4 6h3v2H4z"/><path fill="#fff" fill-opacity=".2" d="M7 5h2v1H7zM2 5h2v1H2zM12 5h2v1h-2z"/>`,
+    dark05: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M2 5v1h1v2h1v1h3V8h2v1h3V8h1V6h1V5H9v1H7V5H2Zm5 1v2H4V6h3Zm2 0v2h3V6H9Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#000" fill-opacity=".3" d="M4 6h3v2H4zM9 6h3v2H9z"/><path fill="#fff" fill-opacity=".2" d="M2 5h2v1H2zM12 5h2v1h-2z"/>`,
+    dark04: (components, colors) => `<path fill="#000" fill-opacity=".3" d="M4 5h3v3H4zM9 5h3v3H9z"/><path fill="${escape.xml(`#${colors.glasses}`)}" d="M3 5h1v1H3zM7 5h2v1H7zM12 5h1v1h-1z"/>`,
+    dark03: (components, colors) => `<path fill="${escape.xml(`#${colors.glasses}`)}" d="M2 5h12v1H2zM3 7h10v1H3zM3 6h1v1H3zM12 6h1v1h-1z"/><path fill="#000" fill-opacity=".3" d="M4 6h8v1H4z"/><path fill="#fff" fill-opacity=".2" d="M2 5h1v1H2zM13 5h1v1h-1z"/><path fill="#000" fill-opacity=".3" d="M7 6h2v1H7z"/>`,
+    dark02: (components, colors) => `<path fill-rule="evenodd" clip-rule="evenodd" d="M14 5H2v1h1v2h4V7h2v1h4V6h1V5Zm-2 1H9v1h3V6ZM7 7H4V6h3v1Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#000" fill-opacity=".3" d="M4 6h3v1H4z"/><path fill="#fff" fill-opacity=".2" d="M2 5h1v1H2zM7 5h2v1H7zM13 5h1v1h-1z"/><path fill="#000" fill-opacity=".3" d="M9 6h3v1H9z"/>`,
+    dark01: (components, colors) => `<path d="M2 5h5v1H4v1H3V6H2V5ZM7 7v1H4V7h3ZM9 7H7V6h2v1ZM12 7H9v1h3V7ZM12 6H9V5h5v1h-1v1h-1V6Z" fill="${escape.xml(`#${colors.glasses}`)}"/><path fill="#000" fill-opacity=".3" d="M4 6h3v1H4zM9 6h3v1H9z"/><path fill="#fff" fill-opacity=".2" d="M12 5h2v1h-2zM2 5h2v1H2zM7 6h2v1H7z"/>`,
 };

lib/components/hair.js

 import { escape } from '@dicebear/core';
 export const hair = {
-    short24: (components, colors) => `<path d="M11 2H5v1h1v1h4V3h1V2ZM3 3h1v2H3V3ZM13 3h-1v2h1V3Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short23: (components, colors) => `<path fill="${escape.xml(colors.hair.value)}" d="M6 2h4v1H6z"/>`,
-    short22: (components, colors) => `<path d="M4 2h8v1h1v2h-2V4H5v1H3V3h1V2Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short21: (components, colors) => `<path fill="${escape.xml(colors.hair.value)}" d="M7 1h2v2H7z"/>`,
-    short20: (components, colors) => `<path d="M6 2h4v1H6zM7 3h2v1H7z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short19: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M4 2h8v1H4zM3 3h3v1H3zM10 3h3v1h-3zM8 3h1v1H8z"/><path d="M8 3h1v1H8z"/></g>`,
-    short18: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M2 3h2v3H2zM12 3h2v3h-2z"/><path d="M12 3h2v3h-2z"/></g>`,
-    short17: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M12 3h2v3h-2zM2 3h2v3H2z"/><path d="M3 2h10v2H3z"/><path d="M4 1h8v2H4z"/></g>`,
-    short16: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M3 2h10v2H3z"/><path d="M4 1h8v2H4z"/></g>`,
-    short15: (components, colors) => `<path d="M3 3h10v1H3zM4 2h8v1H4zM2 4h2v2H2zM12 4h2v2h-2z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short14: (components, colors) => `<path d="M3 4h1v3H3zM12 4h1v3h-1zM3 2h10v2H3z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short13: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M3 2h10v2H3zM2 2h1v1H2zM2 1h1v1H2z"/><path d="M2 2h1v1H2zM13 0h1v1h-1zM2 4h1v1H2zM5 0h1v1H5zM4 1h1v1H4zM6 1h1v1H6zM9 1h1v1H9zM8 0h1v1H8zM12 1h1v1h-1zM13 2h1v1h-1z"/><path d="M12 1h1v1h-1zM14 3h1v1h-1zM13 4h1v1h-1zM1 3h1v1H1z"/></g>`,
-    short12: (components, colors) => `<path d="M4 2h1v3H4zM6 2h1v2H6zM8 2h1v2H8zM10 2h1v2h-1z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short11: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M4 2h8v1H4zM3 1h1v1H3zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM1 3h1v1H1zM1 1h1v1H1zM1 5h1v1H1zM1 6h1v1H1zM0 7h1v1H0zM1 8h1v1H1zM5 1h1v1H5zM6 0h1v1H6zM4 0h1v1H4zM6 1h1v1H6zM7 1h1v1H7zM8 0h1v1H8zM9 1h1v1H9zM9 0h1v1H9zM11 0h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM13 2h1v1h-1zM13 3h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM14 6h1v1h-1zM15 4h1v1h-1z"/><path d="M15 4h1v1h-1zM14 3h1v1h-1zM14 8h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM13 2h1v1h-1zM2 2h1v1H2zM3 1h1v1H3z"/></g>`,
-    short10: (components, colors) => `<path d="M3 2h10v1H3zM3 3h2v1H3zM7 1h5v1H7zM13 3h-1v1h1z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short09: (components, colors) => `<path d="M7 1h5v1H7zM4 2h7v1H4zM3 3h5v1H3z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short08: (components, colors) => `<path d="M5 1h5v1H5zM4 2h8v1H4zM9 3h1v1H9zM11 3h2v1h-2zM3 3h2v1H3z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short07: (components, colors) => `<path d="M3 3h1v1H3zM5 2H4v1h1zM12 2h-1v1h1zM13 3h-1v1h1z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short06: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M4 2H3v3h1zM13 2h-1v3h1z"/><path d="M12 1H3v2h9z"/><path d="M4 2H2v2h2zM14 2h-2v2h2z"/></g>`,
-    short05: (components, colors) => `<path d="M9 1H8v3h1zM8 2H7v2h1zM10 0H9v3h1zM11 1h-1v1h1z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short04: (components, colors) => `<path d="M4 3H3v2h1zM13 3h-1v2h1zM12 2H4v1h8z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short03: (components, colors) => `<path d="M12 2H4v1h8zM13 3h-1v1h1zM6 3H3v1h3zM5 4H3v1h2z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short02: (components, colors) => `<path d="M12 2H4v1h8zM13 3h-2v1h2zM13 4h-1v1h1zM6 3H3v1h3zM5 4H3v1h2zM4 5H3v1h1z" fill="${escape.xml(colors.hair.value)}"/>`,
-    short01: (components, colors) => `<path d="M12 2H4v1h8zM13 3H7v1h6zM13 4h-2v1h2zM13 5h-1v1h1zM6 4H3v1h3zM7 3H3v1h4zM5 5H3v1h2zM4 6H3v1h1z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long21: (components, colors) => `<path d="M13 1H3v1H2v4h1V3h10v3h1V2h-1V1ZM2 8h1v3h1v1H2V8ZM12 11h1V8h1v4h-2v-1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long20: (components, colors) => `<path d="M4 1h8v1h1v1h1v3h-1V4h-1V3H6v1H3v2H2V3h1V2h1V1ZM2 8h1v3h1v1h3v1H2V8ZM12 12H9v1h5V8h-1v3h-1v1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long19: (components, colors) => `<path d="M13 2H3v1H2v3h1V4h10v2h1V3h-1V2ZM3 8H2v1H1v2H0v1h1v-1h1v-1h1V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long18: (components, colors) => `<path d="M13 2H3v1H2v3h1V4h10v2h1V3h-1V2ZM2 8h1v2H2v1H1V9h1V8ZM1 11v1H0v-1h1ZM16 11h-1V9h-1V8h-1v2h1v1h1v1h1v-1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long17: (components, colors) => `<path d="M5 1h7v1h1v1h1v3h-1V4h-2V3H5v1H4v1H3v1H2v2h1v3h1v1H1V4h1V3h1V2h2V1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long16: (components, colors) => `<path d="M3 1h8v1h2v1h1v3h-1V4h-2V3H6v1H5V3H4v1H3v2H2v2h1v2H1V3h1V2h1V1ZM14 8h-1v2h1V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long15: (components, colors) => `<g fill="${escape.xml(colors.hair.value)}"><path d="M5 0h1v1H5V0Z"/><path d="M2 3h1V1h2v1h1V1h1v1h1V1H7V0h2v2h1V1h1v1h1V1h1v1h1v1h-1v1H4v1H3v1H2V5H1V4h1V3Z"/><path d="M2 3H1V2h1v1ZM1 6H0V5h1v1ZM2 8H1V6h1v2ZM2 8h1v2H2V8Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 4h-1v2h2V5h1V4h-1V3h-1v1Zm0 0h1v1h-1V4Z"/><path d="M12 1h-1V0h1v1ZM13 8h1v2h-1V8Z"/></g>`,
-    long14: (components, colors) => `<path d="M5 1H3v1H2v2h1v1h1V4h8v1h1V4h1V2h-1V1h-2v1H5V1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long13: (components, colors) => `<path d="M13 1H3v1H2v1H1v11h2V4h10v10h2V3h-1V2h-1V1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long12: (components, colors) => `<path d="M5 4V3h7v1h1v2h1v2h-1v3h-1v1H9v1h4v1h1v3h1V3h-1V2h-1V1H3v1H2v1H1v14h1v-3h1v-1h4v-1H4v-1H3V8H2V6h1V5h1V4h1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long11: (components, colors) => `<path d="M6 1v1H3v2H2v2h1V5h4V4h3V3h2v1h1v2h1V2h-2V1H6ZM2 8h1v2H2V8ZM14 8h-1v2h1V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long10: (components, colors) => `<path d="M4 1v1H3v1H2v1H1v6h2V8H2V6h1V4h1V3h2v1h1V3h1V2H7V1H4Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long09: (components, colors) => `<path d="M2 1h12v1h1v11h-1v-1h-1V8h1V6h-1V3H3v3H2v2h1v4H2v1H1V2h1V1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long08: (components, colors) => `<path d="M2 1h12v1h1v11h-1v-1h-1V8h1V6h-1V3h-1v1h-1V3H8v1H7v1H6v1H5v1H4v1H3v4H2v1H1V2h1V1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long07: (components, colors) => `<path d="M3 1h10v1h1v1h1v10h-1v-1h-1V8h1V6h-1V4h-1V3H5v1H4v1H3v1H2v2h1v4H2v1H1V3h1V2h1V1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long06: (components, colors) => `<path d="M3 2h10v1h1v3h-1V4H3v2H2V3h1V2ZM13 8h1v1h1v2h-1v-1h-1V8ZM15 11h1v1h-1v-1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long05: (components, colors) => `<path d="M4 0H1v3h2v1H2v2h1V5h2V4h1V3h5v1h1v1h1v1h1V3h-1V2h-1V1H6v1H4V0ZM2 8h1v1H2V8ZM14 8h-1v1h1V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long04: (components, colors) => `<path d="M12 1H5v1H4v1H3v1H2v2h2V5h1V4h1V3h5v1h1v1h1v1h1V3h-1V2h-1V1ZM13 8h1v4h-2v-1h1V8ZM2 8h1v3h1v1H2V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long03: (components, colors) => `<path d="M4 2h8v1h1v2h1v6h1v2h-2v-1h-1V5h-1V4H5v1H4v7H3v1H1v-2h1V5h1V3h1V2Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long02: (components, colors) => `<path d="M4 2h8v1h1v2h1v7h-1v-1h-1V5h-1V4H5v1H4v6H3v1H2V5h1V3h1V2ZM2 12v1H1v-1h1ZM14 12h1v1h-1v-1Z" fill="${escape.xml(colors.hair.value)}"/>`,
-    long01: (components, colors) => `<path d="M12 1H5v1H4v1H3v1H2v2h2V5h1V4h1V3h5v1h1v1h1v1h1V3h-1V2h-1V1ZM13 8h1v6h-1v-1H9v-1h3v-1h1V8ZM2 8h1v3h1v1h3v1H3v1H2V8Z" fill="${escape.xml(colors.hair.value)}"/>`,
+    short24: (components, colors) => `<path d="M11 2H5v1h1v1h4V3h1V2ZM3 3h1v2H3V3ZM13 3h-1v2h1V3Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short23: (components, colors) => `<path fill="${escape.xml(`#${colors.hair}`)}" d="M6 2h4v1H6z"/>`,
+    short22: (components, colors) => `<path d="M4 2h8v1h1v2h-2V4H5v1H3V3h1V2Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short21: (components, colors) => `<path fill="${escape.xml(`#${colors.hair}`)}" d="M7 1h2v2H7z"/>`,
+    short20: (components, colors) => `<path d="M6 2h4v1H6zM7 3h2v1H7z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short19: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M4 2h8v1H4zM3 3h3v1H3zM10 3h3v1h-3zM8 3h1v1H8z"/><path d="M8 3h1v1H8z"/></g>`,
+    short18: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M2 3h2v3H2zM12 3h2v3h-2z"/><path d="M12 3h2v3h-2z"/></g>`,
+    short17: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M12 3h2v3h-2zM2 3h2v3H2z"/><path d="M3 2h10v2H3z"/><path d="M4 1h8v2H4z"/></g>`,
+    short16: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M3 2h10v2H3z"/><path d="M4 1h8v2H4z"/></g>`,
+    short15: (components, colors) => `<path d="M3 3h10v1H3zM4 2h8v1H4zM2 4h2v2H2zM12 4h2v2h-2z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short14: (components, colors) => `<path d="M3 4h1v3H3zM12 4h1v3h-1zM3 2h10v2H3z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short13: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M3 2h10v2H3zM2 2h1v1H2zM2 1h1v1H2z"/><path d="M2 2h1v1H2zM13 0h1v1h-1zM2 4h1v1H2zM5 0h1v1H5zM4 1h1v1H4zM6 1h1v1H6zM9 1h1v1H9zM8 0h1v1H8zM12 1h1v1h-1zM13 2h1v1h-1z"/><path d="M12 1h1v1h-1zM14 3h1v1h-1zM13 4h1v1h-1zM1 3h1v1H1z"/></g>`,
+    short12: (components, colors) => `<path d="M4 2h1v3H4zM6 2h1v2H6zM8 2h1v2H8zM10 2h1v2h-1z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short11: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M4 2h8v1H4zM3 1h1v1H3zM2 2h1v1H2zM2 3h1v1H2zM2 4h1v1H2zM2 5h1v1H2zM1 3h1v1H1zM1 1h1v1H1zM1 5h1v1H1zM1 6h1v1H1zM0 7h1v1H0zM1 8h1v1H1zM5 1h1v1H5zM6 0h1v1H6zM4 0h1v1H4zM6 1h1v1H6zM7 1h1v1H7zM8 0h1v1H8zM9 1h1v1H9zM9 0h1v1H9zM11 0h1v1h-1zM10 1h1v1h-1zM12 1h1v1h-1zM13 2h1v1h-1zM13 3h1v1h-1zM13 4h1v1h-1zM13 5h1v1h-1zM14 6h1v1h-1zM15 4h1v1h-1z"/><path d="M15 4h1v1h-1zM14 3h1v1h-1zM14 8h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM13 2h1v1h-1zM2 2h1v1H2zM3 1h1v1H3z"/></g>`,
+    short10: (components, colors) => `<path d="M3 2h10v1H3zM3 3h2v1H3zM7 1h5v1H7zM13 3h-1v1h1z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short09: (components, colors) => `<path d="M7 1h5v1H7zM4 2h7v1H4zM3 3h5v1H3z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short08: (components, colors) => `<path d="M5 1h5v1H5zM4 2h8v1H4zM9 3h1v1H9zM11 3h2v1h-2zM3 3h2v1H3z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short07: (components, colors) => `<path d="M3 3h1v1H3zM5 2H4v1h1zM12 2h-1v1h1zM13 3h-1v1h1z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short06: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M4 2H3v3h1zM13 2h-1v3h1z"/><path d="M12 1H3v2h9z"/><path d="M4 2H2v2h2zM14 2h-2v2h2z"/></g>`,
+    short05: (components, colors) => `<path d="M9 1H8v3h1zM8 2H7v2h1zM10 0H9v3h1zM11 1h-1v1h1z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short04: (components, colors) => `<path d="M4 3H3v2h1zM13 3h-1v2h1zM12 2H4v1h8z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short03: (components, colors) => `<path d="M12 2H4v1h8zM13 3h-1v1h1zM6 3H3v1h3zM5 4H3v1h2z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short02: (components, colors) => `<path d="M12 2H4v1h8zM13 3h-2v1h2zM13 4h-1v1h1zM6 3H3v1h3zM5 4H3v1h2zM4 5H3v1h1z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    short01: (components, colors) => `<path d="M12 2H4v1h8zM13 3H7v1h6zM13 4h-2v1h2zM13 5h-1v1h1zM6 4H3v1h3zM7 3H3v1h4zM5 5H3v1h2zM4 6H3v1h1z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long21: (components, colors) => `<path d="M13 1H3v1H2v4h1V3h10v3h1V2h-1V1ZM2 8h1v3h1v1H2V8ZM12 11h1V8h1v4h-2v-1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long20: (components, colors) => `<path d="M4 1h8v1h1v1h1v3h-1V4h-1V3H6v1H3v2H2V3h1V2h1V1ZM2 8h1v3h1v1h3v1H2V8ZM12 12H9v1h5V8h-1v3h-1v1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long19: (components, colors) => `<path d="M13 2H3v1H2v3h1V4h10v2h1V3h-1V2ZM3 8H2v1H1v2H0v1h1v-1h1v-1h1V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long18: (components, colors) => `<path d="M13 2H3v1H2v3h1V4h10v2h1V3h-1V2ZM2 8h1v2H2v1H1V9h1V8ZM1 11v1H0v-1h1ZM16 11h-1V9h-1V8h-1v2h1v1h1v1h1v-1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long17: (components, colors) => `<path d="M5 1h7v1h1v1h1v3h-1V4h-2V3H5v1H4v1H3v1H2v2h1v3h1v1H1V4h1V3h1V2h2V1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long16: (components, colors) => `<path d="M3 1h8v1h2v1h1v3h-1V4h-2V3H6v1H5V3H4v1H3v2H2v2h1v2H1V3h1V2h1V1ZM14 8h-1v2h1V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long15: (components, colors) => `<g fill="${escape.xml(`#${colors.hair}`)}"><path d="M5 0h1v1H5V0Z"/><path d="M2 3h1V1h2v1h1V1h1v1h1V1H7V0h2v2h1V1h1v1h1V1h1v1h1v1h-1v1H4v1H3v1H2V5H1V4h1V3Z"/><path d="M2 3H1V2h1v1ZM1 6H0V5h1v1ZM2 8H1V6h1v2ZM2 8h1v2H2V8Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 4h-1v2h2V5h1V4h-1V3h-1v1Zm0 0h1v1h-1V4Z"/><path d="M12 1h-1V0h1v1ZM13 8h1v2h-1V8Z"/></g>`,
+    long14: (components, colors) => `<path d="M5 1H3v1H2v2h1v1h1V4h8v1h1V4h1V2h-1V1h-2v1H5V1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long13: (components, colors) => `<path d="M13 1H3v1H2v1H1v11h2V4h10v10h2V3h-1V2h-1V1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long12: (components, colors) => `<path d="M5 4V3h7v1h1v2h1v2h-1v3h-1v1H9v1h4v1h1v3h1V3h-1V2h-1V1H3v1H2v1H1v14h1v-3h1v-1h4v-1H4v-1H3V8H2V6h1V5h1V4h1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long11: (components, colors) => `<path d="M6 1v1H3v2H2v2h1V5h4V4h3V3h2v1h1v2h1V2h-2V1H6ZM2 8h1v2H2V8ZM14 8h-1v2h1V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long10: (components, colors) => `<path d="M4 1v1H3v1H2v1H1v6h2V8H2V6h1V4h1V3h2v1h1V3h1V2H7V1H4Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long09: (components, colors) => `<path d="M2 1h12v1h1v11h-1v-1h-1V8h1V6h-1V3H3v3H2v2h1v4H2v1H1V2h1V1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long08: (components, colors) => `<path d="M2 1h12v1h1v11h-1v-1h-1V8h1V6h-1V3h-1v1h-1V3H8v1H7v1H6v1H5v1H4v1H3v4H2v1H1V2h1V1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long07: (components, colors) => `<path d="M3 1h10v1h1v1h1v10h-1v-1h-1V8h1V6h-1V4h-1V3H5v1H4v1H3v1H2v2h1v4H2v1H1V3h1V2h1V1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long06: (components, colors) => `<path d="M3 2h10v1h1v3h-1V4H3v2H2V3h1V2ZM13 8h1v1h1v2h-1v-1h-1V8ZM15 11h1v1h-1v-1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long05: (components, colors) => `<path d="M4 0H1v3h2v1H2v2h1V5h2V4h1V3h5v1h1v1h1v1h1V3h-1V2h-1V1H6v1H4V0ZM2 8h1v1H2V8ZM14 8h-1v1h1V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long04: (components, colors) => `<path d="M12 1H5v1H4v1H3v1H2v2h2V5h1V4h1V3h5v1h1v1h1v1h1V3h-1V2h-1V1ZM13 8h1v4h-2v-1h1V8ZM2 8h1v3h1v1H2V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long03: (components, colors) => `<path d="M4 2h8v1h1v2h1v6h1v2h-2v-1h-1V5h-1V4H5v1H4v7H3v1H1v-2h1V5h1V3h1V2Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long02: (components, colors) => `<path d="M4 2h8v1h1v2h1v7h-1v-1h-1V5h-1V4H5v1H4v6H3v1H2V5h1V3h1V2ZM2 12v1H1v-1h1ZM14 12h1v1h-1v-1Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
+    long01: (components, colors) => `<path d="M12 1H5v1H4v1H3v1H2v2h2V5h1V4h1V3h5v1h1v1h1v1h1V3h-1V2h-1V1ZM13 8h1v6h-1v-1H9v-1h3v-1h1V8ZM2 8h1v3h1v1h3v1H3v1H2V8Z" fill="${escape.xml(`#${colors.hair}`)}"/>`,
 };

lib/components/mouth.js

 import { escape } from '@dicebear/core';
 export const mouth = {
-    sad10: (components, colors) => `<path d="M7 9v1h1v1h1V9H7Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad09: (components, colors) => `<path d="M6 10v1h1v-1h3V9H7v1H6Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad08: (components, colors) => `<path d="M6 9v1h3v1h1v-1H9V9H6Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad07: (components, colors) => `<path d="M7 9h2v1H7V9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad06: (components, colors) => `<path d="M6 9h4v1H6V9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad05: (components, colors) => `<path d="M7 9h3v1H7V9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad04: (components, colors) => `<path d="M6 9h3v1H6V9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad03: (components, colors) => `<path d="M9 9v1H7v1H6v-1h1V9h2Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad02: (components, colors) => `<path d="M7 9v1h2v1h1v-1H9V9H7Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    sad01: (components, colors) => `<path d="M7 9h2v1H7V9ZM7 10v1H6v-1h1ZM9 10v1h1v-1H9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy13: (components, colors) => `<path d="M6 10v1h1v1h2v-1h1v-1H9V9H7v1H6Z" fill="${escape.xml(colors.mouth.value)}"/><path d="M7 10v1h2v-1H7Z" fill="none"/>`,
-    happy12: (components, colors) => `<path d="M6 10v1h1v1h2v-1h1v-1H9V9H7v1H6Z" fill="${escape.xml(colors.mouth.value)}"/><path d="M7 10v1h2v-1H7Z" fill="#fff"/>`,
-    happy11: (components, colors) => `<path d="M6 9v1h1v1h2v-1H7V9H6Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy10: (components, colors) => `<path d="M10 9v1H9v1H7v-1h2V9h1Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy09: (components, colors) => `<path d="M7 11h2v-1H7v1ZM7 10V9H6v1h1ZM9 10V9h1v1H9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy08: (components, colors) => `<path d="M6 11v-1h3V9h1v1H9v1H6Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy07: (components, colors) => `<path d="M10 11v-1H7V9H6v1h1v1h3Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy06: (components, colors) => `<path d="M6 9v1h1v1h2v-1h1V9H6Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy05: (components, colors) => `<path d="M7 9v2h2v-1H8V9H7Z" fill="${escape.xml(colors.mouth.value)}"/><path d="M9 11v-1H8V9H7v1h1v1h1Z" fill="none"/>`,
-    happy04: (components, colors) => `<path d="M9 9v1H8v1h2V9H9Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy03: (components, colors) => `<path d="M7 9v1h1v1H6V9h1Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy02: (components, colors) => `<path d="M8 10v1h1v-1H8Z" fill="${escape.xml(colors.mouth.value)}"/>`,
-    happy01: (components, colors) => `<path d="M7 9v2h2V9H7Z" fill="${escape.xml(colors.mouth.value)}"/>`,
+    sad10: (components, colors) => `<path d="M7 9v1h1v1h1V9H7Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad09: (components, colors) => `<path d="M6 10v1h1v-1h3V9H7v1H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad08: (components, colors) => `<path d="M6 9v1h3v1h1v-1H9V9H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad07: (components, colors) => `<path d="M7 9h2v1H7V9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad06: (components, colors) => `<path d="M6 9h4v1H6V9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad05: (components, colors) => `<path d="M7 9h3v1H7V9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad04: (components, colors) => `<path d="M6 9h3v1H6V9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad03: (components, colors) => `<path d="M9 9v1H7v1H6v-1h1V9h2Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad02: (components, colors) => `<path d="M7 9v1h2v1h1v-1H9V9H7Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    sad01: (components, colors) => `<path d="M7 9h2v1H7V9ZM7 10v1H6v-1h1ZM9 10v1h1v-1H9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy13: (components, colors) => `<path d="M6 10v1h1v1h2v-1h1v-1H9V9H7v1H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/><path d="M7 10v1h2v-1H7Z" fill="#fff" fill-opacity=".2"/>`,
+    happy12: (components, colors) => `<path d="M6 10v1h1v1h2v-1h1v-1H9V9H7v1H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/><path d="M7 10v1h2v-1H7Z" fill="#fff"/>`,
+    happy11: (components, colors) => `<path d="M6 9v1h1v1h2v-1H7V9H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy10: (components, colors) => `<path d="M10 9v1H9v1H7v-1h2V9h1Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy09: (components, colors) => `<path d="M7 11h2v-1H7v1ZM7 10V9H6v1h1ZM9 10V9h1v1H9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy08: (components, colors) => `<path d="M6 11v-1h3V9h1v1H9v1H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy07: (components, colors) => `<path d="M10 11v-1H7V9H6v1h1v1h3Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy06: (components, colors) => `<path d="M6 9v1h1v1h2v-1h1V9H6Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy05: (components, colors) => `<path d="M7 9v2h2v-1H8V9H7Z" fill="${escape.xml(`#${colors.mouth}`)}"/><path d="M9 11v-1H8V9H7v1h1v1h1Z" fill="#fff" fill-opacity=".2"/>`,
+    happy04: (components, colors) => `<path d="M9 9v1H8v1h2V9H9Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy03: (components, colors) => `<path d="M7 9v1h1v1H6V9h1Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy02: (components, colors) => `<path d="M8 10v1h1v-1H8Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
+    happy01: (components, colors) => `<path d="M7 9v2h2V9H7Z" fill="${escape.xml(`#${colors.mouth}`)}"/>`,
 };

lib/core.js

@@ -12,2 +12,3 @@ import { escape } from '@dicebear/core';
         source: 'https://dicebear.com',
+        homepage: 'https://dicebear.com',
         license: {
@@ -31,5 +32,5 @@ name: 'CC0 1.0',
             },
-            body: `<path d="M4 2h8v1h1v3h1v2h-1v3h-1v1H9v1h4v1h1v2H2v-2h1v-1h4v-1H4v-1H3V8H2V6h1V3h1V2Z" fill="${escape.xml(colors.skin.value)}"/><path d="M4 2h8v1h1v3h1v2h-1v3h-1v1H4v-1H3V8H2V6h1V3h1V2Z" fill="none"/>${(_b = (_a = components.accessories) === null || _a === void 0 ? void 0 : _a.value(components, colors)) !== null && _b !== void 0 ? _b : ''}${(_d = (_c = components.clothing) === null || _c === void 0 ? void 0 : _c.value(components, colors)) !== null && _d !== void 0 ? _d : ''}${(_f = (_e = components.eyes) === null || _e === void 0 ? void 0 : _e.value(components, colors)) !== null && _f !== void 0 ? _f : ''}${(_h = (_g = components.glasses) === null || _g === void 0 ? void 0 : _g.value(components, colors)) !== null && _h !== void 0 ? _h : ''}${(_k = (_j = components.beard) === null || _j === void 0 ? void 0 : _j.value(components, colors)) !== null && _k !== void 0 ? _k : ''}${(_m = (_l = components.mouth) === null || _l === void 0 ? void 0 : _l.value(components, colors)) !== null && _m !== void 0 ? _m : ''}${(_p = (_o = components.hair) === null || _o === void 0 ? void 0 : _o.value(components, colors)) !== null && _p !== void 0 ? _p : ''}`,
+            body: `<path d="M4 2h8v1h1v3h1v2h-1v3h-1v1H9v1h4v1h1v2H2v-2h1v-1h4v-1H4v-1H3V8H2V6h1V3h1V2Z" fill="${escape.xml(`#${colors.skin}`)}"/><path d="M4 2h8v1h1v3h1v2h-1v3h-1v1H4v-1H3V8H2V6h1V3h1V2Z" fill="#fff" fill-opacity=".1"/>${(_b = (_a = components.accessories) === null || _a === void 0 ? void 0 : _a.value(components, colors)) !== null && _b !== void 0 ? _b : ''}${(_d = (_c = components.clothing) === null || _c === void 0 ? void 0 : _c.value(components, colors)) !== null && _d !== void 0 ? _d : ''}${(_f = (_e = components.eyes) === null || _e === void 0 ? void 0 : _e.value(components, colors)) !== null && _f !== void 0 ? _f : ''}${(_h = (_g = components.glasses) === null || _g === void 0 ? void 0 : _g.value(components, colors)) !== null && _h !== void 0 ? _h : ''}${(_k = (_j = components.beard) === null || _j === void 0 ? void 0 : _j.value(components, colors)) !== null && _k !== void 0 ? _k : ''}${(_m = (_l = components.mouth) === null || _l === void 0 ? void 0 : _l.value(components, colors)) !== null && _m !== void 0 ? _m : ''}${(_p = (_o = components.hair) === null || _o === void 0 ? void 0 : _o.value(components, colors)) !== null && _p !== void 0 ? _p : ''}`,
         };
     },
 };

lib/index.d.ts

@@ -1,13 +0,3 @@
-/*!
- * Pixel Art (@dicebear/pixel-art)
- *
- * Code licensed under MIT License.
- * Copyright (c) 2022 Florian Körner
- *
- * Design "Pixel Art" by Florian Körner licensed under CC0 1.0.
- * Source: https://dicebear.com
- * License: https://creativecommons.org/licenses/zero/1.0/
- */
 declare const create: import("@dicebear/core").StyleCreate<import("./types.js").Options>, meta: import("@dicebear/core").StyleMeta, schema: import("json-schema").JSONSchema7;
 export { create, meta, schema };
 export type { Options } from './types.js';

lib/index.js

@@ -9,6 +9,6 @@ /*!
  * Source: https://dicebear.com
+ * Homepage: https://dicebear.com
  * License: https://creativecommons.org/licenses/zero/1.0/
- */
-import { style } from './core.js';
+ */ import { style } from './core.js';
 const { create, meta, schema } = style;
 export { create, meta, schema };

lib/schema.js

@@ -18,12 +18,5 @@ export const schema = {
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
-            default: ['gold01', 'gold02', 'gold03', 'silver01', 'silver02'],
-            examples: [
-                ['gold01'],
-                ['gold02'],
-                ['gold03'],
-                ['silver01'],
-                ['silver02'],
-            ],
+            default: ['daa520', 'ffd700', 'fafad2', 'd3d3d3', 'a9a9a9'],
         },
@@ -35,2 +28,3 @@ accessoriesProbability: {
             default: 10,
+            examples: [0, 100],
         },
@@ -73,3 +67,9 @@ beard: {
         },
-        beardProbability: { type: 'integer', minimum: 0, maximum: 100, default: 5 },
+        beardProbability: {
+            type: 'integer',
+            minimum: 0,
+            maximum: 100,
+            default: 5,
+            examples: [0, 100],
+        },
         clothing: {
@@ -160,32 +160,18 @@ type: 'array',
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
             default: [
-                'blue01',
-                'blue02',
-                'blue03',
-                'green01',
-                'green02',
-                'green03',
-                'red01',
-                'red02',
-                'red03',
-                'yellow01',
-                'yellow02',
-                'yellow03',
+                '5bc0de',
+                '428bca',
+                '03396c',
+                '88d8b0',
+                '44c585',
+                '00b159',
+                'ff6f69',
+                'd11141',
+                'ae0001',
+                'ffeead',
+                'ffd969',
+                'ffc425',
             ],
-            examples: [
-                ['blue01'],
-                ['blue02'],
-                ['blue03'],
-                ['green01'],
-                ['green02'],
-                ['green03'],
-                ['red01'],
-                ['red02'],
-                ['red03'],
-                ['yellow01'],
-                ['yellow02'],
-                ['yellow03'],
-            ],
         },
@@ -244,20 +230,5 @@ eyes: {
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
-            default: [
-                'variant01',
-                'variant02',
-                'variant03',
-                'variant04',
-                'variant05',
-                'variant06',
-            ],
-            examples: [
-                ['variant01'],
-                ['variant02'],
-                ['variant03'],
-                ['variant04'],
-                ['variant05'],
-                ['variant06'],
-            ],
+            default: ['76778b', '697b94', '647b90', '5b7c8b', '588387', '876658'],
         },
@@ -322,13 +293,5 @@ glasses: {
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
-            default: ['black01', 'black02', 'black03', 'blue01', 'green01', 'red01'],
-            examples: [
-                ['black01'],
-                ['black02'],
-                ['black03'],
-                ['blue01'],
-                ['green01'],
-                ['red01'],
-            ],
+            default: ['4b4b4b', '323232', '191919', '43677d', '5f705c', 'a04b5d'],
         },
@@ -340,2 +303,3 @@ glassesProbability: {
             default: 20,
+            examples: [0, 100],
         },
@@ -493,30 +457,17 @@ hair: {
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
             default: [
-                'variant01',
-                'variant02',
-                'variant03',
-                'variant04',
-                'variant05',
-                'variant06',
-                'variant07',
-                'variant08',
-                'variant09',
-                'variant10',
-                'variant11',
+                'cab188',
+                '603a14',
+                '83623b',
+                'a78961',
+                '611c17',
+                '603015',
+                '612616',
+                '28150a',
+                '009bbd',
+                'bd1700',
+                '91cb15',
             ],
-            examples: [
-                ['variant01'],
-                ['variant02'],
-                ['variant03'],
-                ['variant04'],
-                ['variant05'],
-                ['variant06'],
-                ['variant07'],
-                ['variant08'],
-                ['variant09'],
-                ['variant10'],
-                ['variant11'],
-            ],
         },
@@ -608,6 +559,5 @@ mouth: {
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
-            default: ['variant01', 'variant02', 'variant03', 'variant04'],
-            examples: [['variant01'], ['variant02'], ['variant03'], ['variant04']],
+            default: ['d29985', 'c98276', 'e35d6a', 'de0f0d'],
         },
@@ -618,24 +568,14 @@ skinColor: {
                 type: 'string',
-                pattern: '^([0-9a-zA-Z]+|#[a-fA-F0-9]{3}|#[a-fA-F0-9]{4}|#[a-fA-F0-9]{6}|#[a-fA-F0-9]{8})$',
+                pattern: '^#([a-fA-F0-9]{3}|[a-fA-F0-9]{4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$',
             },
             default: [
-                'variant01',
-                'variant02',
-                'variant03',
-                'variant04',
-                'variant05',
-                'variant06',
-                'variant07',
-                'variant08',
+                'ffdbac',
+                'f5cfa0',
+                'eac393',
+                'e0b687',
+                'cb9e6e',
+                'b68655',
+                'a26d3d',
+                '8d5524',
             ],
-            examples: [
-                ['variant01'],
-                ['variant02'],
-                ['variant03'],
-                ['variant04'],
-                ['variant05'],
-                ['variant06'],
-                ['variant07'],
-                ['variant08'],
-            ],
         },
@@ -642,0 +582,0 @@ },

lib/types.d.ts

@@ -23,7 +23,3 @@ export interface Options {
 export declare type ColorGroupItem = string;
-export declare type ColorPickCollection = Record<string, ColorPick>;
-export declare type ColorPick = {
-    name: string;
-    value: ColorGroupItem;
-};
+export declare type ColorPickCollection = Record<string, string>;
 export declare type ComponentGroup = Record<string, ComponentGroupItem>;
@@ -30,0 +26,0 @@ export declare type ComponentGroupCollection = Record<string, ComponentGroup>;

lib/utils/getColors.js

@@ -1,40 +0,12 @@
-import { pickColor } from './pickColor.js';
 export function getColors({ prng, options }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     return {
-        accessories: pickColor({
-            prng,
-            group: 'accessories',
-            values: options.accessoriesColor,
-        }),
-        clothing: pickColor({
-            prng,
-            group: 'clothing',
-            values: options.clothingColor,
-        }),
-        eyes: pickColor({
-            prng,
-            group: 'eyes',
-            values: options.eyesColor,
-        }),
-        glasses: pickColor({
-            prng,
-            group: 'glasses',
-            values: options.glassesColor,
-        }),
-        hair: pickColor({
-            prng,
-            group: 'hair',
-            values: options.hairColor,
-        }),
-        mouth: pickColor({
-            prng,
-            group: 'mouth',
-            values: options.mouthColor,
-        }),
-        skin: pickColor({
-            prng,
-            group: 'skin',
-            values: options.skinColor,
-        }),
+        accessories: (_b = prng.pick((_a = options.accessoriesColor) !== null && _a !== void 0 ? _a : [])) !== null && _b !== void 0 ? _b : 'transparent',
+        clothing: (_d = prng.pick((_c = options.clothingColor) !== null && _c !== void 0 ? _c : [])) !== null && _d !== void 0 ? _d : 'transparent',
+        eyes: (_f = prng.pick((_e = options.eyesColor) !== null && _e !== void 0 ? _e : [])) !== null && _f !== void 0 ? _f : 'transparent',
+        glasses: (_h = prng.pick((_g = options.glassesColor) !== null && _g !== void 0 ? _g : [])) !== null && _h !== void 0 ? _h : 'transparent',
+        hair: (_k = prng.pick((_j = options.hairColor) !== null && _j !== void 0 ? _j : [])) !== null && _k !== void 0 ? _k : 'transparent',
+        mouth: (_m = prng.pick((_l = options.mouthColor) !== null && _l !== void 0 ? _l : [])) !== null && _m !== void 0 ? _m : 'transparent',
+        skin: (_p = prng.pick((_o = options.skinColor) !== null && _o !== void 0 ? _o : [])) !== null && _p !== void 0 ? _p : 'transparent',
     };
 }

lib/utils/pickComponent.js

@@ -5,7 +5,4 @@ import * as components from '../components/index.js';
     const key = prng.pick(values);
-    if (componentCollection[group][key]) {
-        return {
-            name: key,
-            value: componentCollection[group][key],
-        };
+    if (key && componentCollection[group][key]) {
+        return { name: key, value: componentCollection[group][key] };
     }
@@ -12,0 +9,0 @@ else {

package.json

 {
   "name": "@dicebear/pixel-art",
-  "version": "5.0.0-alpha.31",
+  "version": "5.0.0-alpha.32",
   "description": "Avatar style for DiceBear",
@@ -31,3 +31,3 @@ "keywords": [
   "devDependencies": {
-    "@dicebear/core": "^5.0.0-alpha.31",
+    "@dicebear/core": "^5.0.0-alpha.32",
     "@tsconfig/recommended": "^1.0.1",
@@ -47,3 +47,3 @@ "del-cli": "^4.0.1",
   },
-  "gitHead": "088e33eb5bc45d01c9b6350011d973a5bd23bcc8"
+  "gitHead": "5a4a06cbb8aca42a5d19da8e704b3a7b3a45d755"
 }

README.md

@@ -5,3 +5,3 @@ <h1 align="center"><img src="./tests/svg/0.svg" width="124" /> <br />Pixel Art</h1>
     <a href="https://dicebear.com">Pixel Art</a>
-      by Florian Körner
+      by <a href="https://dicebear.com">Florian Körner</a>
 </p>
@@ -8,0 +8,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

55881

decreased by-7.31%

Number of package files

37

decreased by-32.73%

Lines of code

990

decreased by-17.57%

No dependency changes