@sportswik/icons-react 1.0.0 → 1.1.0

package/README.md

@@ -11,7 +11,7 @@ npm i @sportswik/icons-react
 ## Usage
 
 ```tsx
-import PlayCircle from "@sportswik/icons-react/PlayCircle";
+import { PlayCircle } from "@sportswik/icons-react";
 
 export function Button() {
   return <PlayCircle width={24} height={24} />;
@@ -24,6 +24,26 @@ All icons inherit color via `currentColor`. Use CSS or inline styles to tint:
 <PlayCircle style={{ color: "#0EA5E9" }} />
 ```
 
+## Animated icons
+
+A hand-written subset animates on hover. Same names and props as the static
+icons, plus `animate`:
+
+```tsx
+import { Settings } from "@sportswik/icons-react/animated";
+
+<Settings />                 // animates on its own mouse hover
+<Settings animate={hovered} /> // a parent (e.g. a nav row) drives it
+```
+
+- `animate={true}` plays once and holds; `false` eases back to rest.
+- Touch never plays, and `prefers-reduced-motion` keeps icons at rest.
+- Requires React 18+ and `motion` (`npm i motion`), an optional peer dependency.
+- The entry is a client module (`"use client"`); the static entry is not.
+
+Available: AlertTriangle, Box, Dashboard, Database, Idea, Menu, Puzzle, Rocket,
+Settings, Ticket, UserShield.
+
 ## Storybook & Chromatic
 
 View all icons in Storybook:

package/dist/animated.d.mts

@@ -0,0 +1,42 @@
+import { ComponentType, SVGProps } from 'react';
+
+declare const animatedIconBrand: unique symbol;
+type AnimatedIconProps = SVGProps<SVGSVGElement> & {
+    /**
+     * `true` plays the animation once and holds its end state; `false` eases back
+     * to rest. Leave it out and the icon animates on its own mouse hover.
+     */
+    animate?: boolean;
+};
+/**
+ * An animated icon. The brand exists only in the type system: it stops a static
+ * icon, whose props are a subset of these, from being accepted wherever a
+ * consumer means to pass `animate`.
+ */
+type AnimatedIcon = ComponentType<AnimatedIconProps> & {
+    readonly [animatedIconBrand]: true;
+};
+
+declare const _default$a: AnimatedIcon;
+
+declare const _default$9: AnimatedIcon;
+
+declare const _default$8: AnimatedIcon;
+
+declare const _default$7: AnimatedIcon;
+
+declare const _default$6: AnimatedIcon;
+
+declare const _default$5: AnimatedIcon;
+
+declare const _default$4: AnimatedIcon;
+
+declare const _default$3: AnimatedIcon;
+
+declare const _default$2: AnimatedIcon;
+
+declare const _default$1: AnimatedIcon;
+
+declare const _default: AnimatedIcon;
+
+export { _default$a as AlertTriangle, type AnimatedIcon, type AnimatedIconProps, _default$9 as Box, _default$8 as Dashboard, _default$7 as Database, _default$6 as Idea, _default$5 as Menu, _default$4 as Puzzle, _default$3 as Rocket, _default$2 as Settings, _default$1 as Ticket, _default as UserShield };

package/dist/animated.d.ts

@@ -0,0 +1,42 @@
+import { ComponentType, SVGProps } from 'react';
+
+declare const animatedIconBrand: unique symbol;
+type AnimatedIconProps = SVGProps<SVGSVGElement> & {
+    /**
+     * `true` plays the animation once and holds its end state; `false` eases back
+     * to rest. Leave it out and the icon animates on its own mouse hover.
+     */
+    animate?: boolean;
+};
+/**
+ * An animated icon. The brand exists only in the type system: it stops a static
+ * icon, whose props are a subset of these, from being accepted wherever a
+ * consumer means to pass `animate`.
+ */
+type AnimatedIcon = ComponentType<AnimatedIconProps> & {
+    readonly [animatedIconBrand]: true;
+};
+
+declare const _default$a: AnimatedIcon;
+
+declare const _default$9: AnimatedIcon;
+
+declare const _default$8: AnimatedIcon;
+
+declare const _default$7: AnimatedIcon;
+
+declare const _default$6: AnimatedIcon;
+
+declare const _default$5: AnimatedIcon;
+
+declare const _default$4: AnimatedIcon;
+
+declare const _default$3: AnimatedIcon;
+
+declare const _default$2: AnimatedIcon;
+
+declare const _default$1: AnimatedIcon;
+
+declare const _default: AnimatedIcon;
+
+export { _default$a as AlertTriangle, type AnimatedIcon, type AnimatedIconProps, _default$9 as Box, _default$8 as Dashboard, _default$7 as Database, _default$6 as Idea, _default$5 as Menu, _default$4 as Puzzle, _default$3 as Rocket, _default$2 as Settings, _default$1 as Ticket, _default as UserShield };

package/dist/animated.js

@@ -0,0 +1,403 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/animated/index.ts
+var animated_exports = {};
+__export(animated_exports, {
+  AlertTriangle: () => AlertTriangle_default,
+  Box: () => Box_default,
+  Dashboard: () => Dashboard_default,
+  Database: () => Database_default,
+  Idea: () => Idea_default,
+  Menu: () => Menu_default,
+  Puzzle: () => Puzzle_default,
+  Rocket: () => Rocket_default,
+  Settings: () => Settings_default,
+  Ticket: () => Ticket_default,
+  UserShield: () => UserShield_default
+});
+module.exports = __toCommonJS(animated_exports);
+
+// src/animated/AlertTriangle.tsx
+var import_react4 = require("motion/react");
+
+// src/animated/AnimatedSvg.tsx
+var import_react3 = require("motion/react");
+
+// src/animated/useIconAnimation.ts
+var import_react = require("react");
+var import_react2 = require("motion/react");
+function useIconAnimation(animate, { onPointerEnter, onPointerLeave }) {
+  const [hovered, setHovered] = (0, import_react.useState)(false);
+  const reducedMotion = (0, import_react2.useReducedMotion)();
+  const playing = !reducedMotion && (animate ?? hovered);
+  const handlers = {
+    onPointerEnter(event) {
+      if (event.pointerType === "mouse") setHovered(true);
+      onPointerEnter?.(event);
+    },
+    onPointerLeave(event) {
+      setHovered(false);
+      onPointerLeave?.(event);
+    }
+  };
+  return { state: playing ? "play" : "rest", handlers };
+}
+
+// src/animated/AnimatedSvg.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AnimatedSvg({
+  animate,
+  children,
+  onPointerEnter,
+  onPointerLeave,
+  ...props
+}) {
+  const { state, handlers } = useIconAnimation(animate, {
+    onPointerEnter,
+    onPointerLeave
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      overflow: "visible",
+      focusable: "false",
+      "aria-hidden": "true",
+      "data-animating": state === "play",
+      ...props,
+      ...handlers,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.motion.g, { initial: false, animate: state, children })
+    }
+  );
+}
+
+// src/animated/transition.ts
+var holdSpring = { type: "spring", stiffness: 260, damping: 15 };
+var settleSpring = { type: "spring", stiffness: 320, damping: 26 };
+var settleTween = { duration: 0.2, ease: "easeOut" };
+var gesture = { duration: 0.45, ease: "easeInOut" };
+var stagger = 0.06;
+
+// src/animated/AlertTriangle.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var shake = {
+  rest: { rotate: 0, transition: settleSpring },
+  play: { rotate: [0, -8, 8, -6, 6, -3, 0], transition: { ...gesture, duration: 0.5 } }
+};
+var AlertTriangle = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react4.motion.path,
+        {
+          variants: shake,
+          style: { originX: 0.5, originY: 1 },
+          d: "M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 9v4M12 17h.01" })
+    ]
+  }
+);
+var AlertTriangle_default = AlertTriangle;
+
+// src/animated/Box.tsx
+var import_react5 = require("motion/react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var lid = {
+  rest: { y: 0, rotate: 0, transition: settleSpring },
+  play: { y: -2, rotate: -8, transition: holdSpring }
+};
+var Box = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AnimatedSvg, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.8, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M19.364 8v13H4.636V8M10.364 12h3.272" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react5.motion.path,
+    {
+      variants: lid,
+      style: { originX: 0, originY: 1 },
+      d: "M3 3h18v5H3z"
+    }
+  )
+] }) });
+var Box_default = Box;
+
+// src/animated/Dashboard.tsx
+var import_react6 = require("motion/react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var TILE = "a1.1 1.1 0 0 0-1.1-1.1h-4a1.1 1.1 0 0 0-1.1 1.1v4a1.1 1.1 0 0 0 1.1 1.1h4a1.1 1.1 0 0 0 1.1-1.1zm1.8 4a2.9 2.9 0 0 1-2.9 2.9h-4a2.9 2.9 0 0 1-2.9-2.9v-4a2.9 2.9 0 0 1 2.9-2.9h4a2.9 2.9 0 0 1 2.9 2.9z";
+var STARTS = ["M9.6 4.5", "M20.6 4.5", "M20.6 15.5", "M9.6 15.5"];
+var pulse = {
+  rest: { scale: 1, transition: settleTween },
+  play: (i) => ({
+    scale: [1, 0.85, 1],
+    transition: { ...gesture, duration: 0.35, delay: i * stagger }
+  })
+};
+var Dashboard = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AnimatedSvg, { ...props, children: STARTS.map((start, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  import_react6.motion.path,
+  {
+    custom: i,
+    variants: pulse,
+    fill: "currentColor",
+    d: `${start}${TILE}`
+  },
+  start
+)) });
+var Dashboard_default = Dashboard;
+
+// src/animated/Database.tsx
+var import_react7 = require("motion/react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var topDisc = {
+  rest: { y: 0, transition: settleSpring },
+  play: { y: [0, -1, 0], transition: gesture }
+};
+var band = {
+  rest: { y: 0, transition: settleSpring },
+  play: { y: [0, 1.5, 0], transition: { ...gesture, delay: stagger } }
+};
+var Database = (props) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M21 5v14c0 1.66-4 3-9 3s-9-1.34-9-3V5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react7.motion.path, { variants: band, d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react7.motion.path,
+        {
+          variants: topDisc,
+          d: "M21 5c0 1.657-4.03 3-9 3S3 6.657 3 5M21 5c0-1.657-4.03-3-9-3S3 3.343 3 5"
+        }
+      )
+    ]
+  }
+);
+var Database_default = Database;
+
+// src/animated/Idea.tsx
+var import_react8 = require("motion/react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var RAYS = [
+  "M3.9 10.889H3",
+  "M6.272 5.232l-.636-.628",
+  "M12 2.889V2",
+  "M17.4 4.667l.45-.445",
+  "M20.1 10.889h.9"
+];
+var ray = {
+  rest: { pathLength: 1, opacity: 1, transition: settleTween },
+  play: (i) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: { ...gesture, duration: 0.3, delay: i * stagger }
+  })
+};
+var Idea = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M14.25 15.778c.15-.778.525-1.322 1.125-1.945.75-.7 1.125-1.71 1.125-2.722a4.76 4.76 0 0 0-1.318-3.3A4.42 4.42 0 0 0 12 6.444a4.42 4.42 0 0 0-3.182 1.367 4.76 4.76 0 0 0-1.318 3.3c0 .778.15 1.711 1.125 2.722.525.545.975 1.167 1.125 1.945M9.75 18.888h4.5M10.5 22h3" }),
+      RAYS.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react8.motion.path, { d, custom: i, variants: ray }, d))
+    ]
+  }
+);
+var Idea_default = Idea;
+
+// src/animated/Menu.tsx
+var import_react9 = require("motion/react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LINES = ["M4 6h16", "M4 12h16", "M4 18h16"];
+var shrink = {
+  rest: { pathLength: 1, transition: settleTween },
+  play: (i) => ({
+    pathLength: [1, 0.6, 1],
+    transition: { ...gesture, delay: i * stagger }
+  })
+};
+var Menu = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: LINES.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react9.motion.path, { d, custom: i, variants: shrink }, d))
+  }
+);
+var Menu_default = Menu;
+
+// src/animated/Puzzle.tsx
+var import_react10 = require("motion/react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var snap = {
+  rest: { x: 0, y: 0, transition: settleSpring },
+  play: { x: [0, 1, 0], y: [0, -1, 0], transition: gesture }
+};
+var Puzzle = (props) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AnimatedSvg, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  import_react10.motion.path,
+  {
+    variants: snap,
+    stroke: "currentColor",
+    strokeWidth: 1.8,
+    d: "M10.15 2.25a2.25 2.25 0 0 1 1.717 3.703c-.284.334-.321.925.048 1.16.088.057.19.087.295.087h3.69a.9.9 0 0 1 .9.9v3.69c0 .104.03.207.086.295.236.37.827.332 1.16.048a2.25 2.25 0 1 1 0 3.433c-.333-.283-.924-.32-1.16.049a.55.55 0 0 0-.086.295v4.69a.9.9 0 0 1-.9.9h-3.69a.55.55 0 0 1-.295-.086c-.37-.236-.332-.827-.048-1.16a2.25 2.25 0 1 0-3.433 0c.283.333.32.924-.049 1.16a.55.55 0 0 1-.295.086H3.4a.9.9 0 0 1-.9-.9v-4.69c0-.104.03-.207.086-.295.236-.37.827-.332 1.16-.049a2.25 2.25 0 1 0 0-3.433c-.333.284-.924.321-1.16-.048a.55.55 0 0 1-.086-.295V8.1a.9.9 0 0 1 .9-.9h4.69c.104 0 .207-.03.295-.086.37-.236.332-.827.049-1.16A2.25 2.25 0 0 1 10.15 2.25Z"
+  }
+) });
+var Puzzle_default = Puzzle;
+
+// src/animated/Rocket.tsx
+var import_react11 = require("motion/react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var liftOff = {
+  rest: { x: 0, y: 0, transition: settleSpring },
+  play: { x: 2, y: -2, transition: holdSpring }
+};
+var Rocket = (props) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_react11.motion.path,
+        {
+          variants: liftOff,
+          d: "M12 15l-3-3m3 3a22.4 22.4 0 0 0 4-2m-4 2v5s3.03-.55 4-2c1.08-1.62 0-5 0-5m-7-1a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11m-7-1H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09" })
+    ]
+  }
+);
+var Rocket_default = Rocket;
+
+// src/animated/Settings.tsx
+var import_react12 = require("motion/react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var gear = {
+  rest: { rotate: 0, transition: settleSpring },
+  play: { rotate: 90, transition: holdSpring }
+};
+var Settings = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react12.motion.g, { variants: gear, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6" })
+    ] })
+  }
+);
+var Settings_default = Settings;
+
+// src/animated/Ticket.tsx
+var import_react13 = require("motion/react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var tilt = {
+  rest: { rotate: 0, transition: settleSpring },
+  play: { rotate: [0, -10, 4, 0], transition: gesture }
+};
+var Ticket = (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  AnimatedSvg,
+  {
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.8,
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_react13.motion.path,
+      {
+        variants: tilt,
+        d: "M13 5v2m0 10v2m0-8v2M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z"
+      }
+    )
+  }
+);
+var Ticket_default = Ticket;
+
+// src/animated/UserShield.tsx
+var import_react14 = require("motion/react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var bob = {
+  rest: { y: 0, transition: settleSpring },
+  play: { y: [0, -1.5, 0], transition: gesture }
+};
+var UserShield = (props) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(AnimatedSvg, { ...props, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "path",
+    {
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: 1.8,
+      d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"
+    }
+  ),
+  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react14.motion.path,
+    {
+      variants: bob,
+      fill: "currentColor",
+      d: "M12 11.85c1.68 0 3.4 1.121 3.4 2.9a.9.9 0 0 1-.9.9h-5a.9.9 0 0 1-.9-.9c0-1.779 1.72-2.9 3.4-2.9m0-5.25a2.4 2.4 0 1 1 0 4.8 2.4 2.4 0 0 1 0-4.8"
+    }
+  )
+] });
+var UserShield_default = UserShield;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AlertTriangle,
+  Box,
+  Dashboard,
+  Database,
+  Idea,
+  Menu,
+  Puzzle,
+  Rocket,
+  Settings,
+  Ticket,
+  UserShield
+});