@nice2dev/icons 1.3.16 → 1.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -0
- package/README.md +21 -1
- package/dist/cjs/animationControls.js +10 -5
- package/dist/cjs/animationSpeed.js +102 -0
- package/dist/cjs/createIcon.js +68 -24
- package/dist/cjs/iconStyles.js +1171 -1081
- package/dist/cjs/icons/actions.js +2 -2
- package/dist/cjs/icons/brand.js +4 -747
- package/dist/cjs/icons/business.js +59 -23
- package/dist/cjs/icons/files.js +54 -54
- package/dist/cjs/icons/food.js +75 -557
- package/dist/cjs/icons/fun.js +51 -33
- package/dist/cjs/icons/index.js +0 -7
- package/dist/cjs/icons/navigation.js +26 -7
- package/dist/cjs/icons/omniverk.js +17 -244
- package/dist/cjs/icons/science.js +63 -170
- package/dist/cjs/icons/sports.js +45 -137
- package/dist/cjs/index.js +0 -7
- package/dist/cjs/reducedMotion.js +30 -0
- package/dist/cjs/smilAnimations.js +16 -3
- package/dist/cjs/utilities.js +4 -25
- package/dist/esm/animationControls.js +10 -5
- package/dist/esm/animationSpeed.js +102 -0
- package/dist/esm/createIcon.js +69 -25
- package/dist/esm/iconStyles.js +1171 -1081
- package/dist/esm/icons/actions.js +2 -2
- package/dist/esm/icons/brand.js +5 -748
- package/dist/esm/icons/business.js +59 -23
- package/dist/esm/icons/files.js +54 -54
- package/dist/esm/icons/food.js +74 -556
- package/dist/esm/icons/fun.js +51 -33
- package/dist/esm/icons/index.js +3 -10
- package/dist/esm/icons/navigation.js +26 -7
- package/dist/esm/icons/omniverk.js +17 -244
- package/dist/esm/icons/science.js +63 -170
- package/dist/esm/icons/sports.js +45 -137
- package/dist/esm/index.js +3 -10
- package/dist/esm/nicetodev-icons.css +1 -1
- package/dist/esm/reducedMotion.js +30 -0
- package/dist/esm/smilAnimations.js +16 -3
- package/dist/esm/utilities.js +5 -26
- package/dist/types/animationSpeed.d.ts +28 -0
- package/dist/types/createIcon.d.ts +6 -0
- package/dist/types/iconStyles.d.ts +12 -1
- package/dist/types/icons/brand.d.ts +0 -4
- package/dist/types/icons/food.d.ts +0 -3
- package/dist/types/icons/index.d.ts +3 -3
- package/dist/types/icons/omniverk.d.ts +0 -3
- package/dist/types/icons/science.d.ts +1 -1
- package/dist/types/reducedMotion.d.ts +6 -0
- package/dist/types/smilAnimations.d.ts +10 -2
- package/dist/types/types.d.ts +26 -0
- package/dist/types/utilities.d.ts +2 -2
- package/package.json +2 -2
- package/dist/cjs/nicetodev-icons.css +0 -1
|
@@ -802,32 +802,68 @@ const NtdPiggyBank = /* @__PURE__ */ createIcon({
|
|
|
802
802
|
] })
|
|
803
803
|
}
|
|
804
804
|
});
|
|
805
|
+
const COIN_FRONT = { cx: 9.2, cy: 15, r: 6.5 };
|
|
806
|
+
const COIN_BACK = { cx: 15.2, cy: 8.8, r: 6 };
|
|
807
|
+
const COIN_GAP = 0.8;
|
|
808
|
+
function coins(back, front, accent, width) {
|
|
809
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
810
|
+
/* @__PURE__ */ jsx("circle", { cx: COIN_BACK.cx, cy: COIN_BACK.cy, r: COIN_BACK.r, fill: back }),
|
|
811
|
+
accent && /* @__PURE__ */ jsx(
|
|
812
|
+
"circle",
|
|
813
|
+
{
|
|
814
|
+
cx: COIN_BACK.cx,
|
|
815
|
+
cy: COIN_BACK.cy,
|
|
816
|
+
r: COIN_BACK.r - 1.9,
|
|
817
|
+
stroke: accent,
|
|
818
|
+
strokeWidth: width,
|
|
819
|
+
fill: "none"
|
|
820
|
+
}
|
|
821
|
+
),
|
|
822
|
+
accent && /* @__PURE__ */ jsx("circle", { cx: COIN_FRONT.cx, cy: COIN_FRONT.cy, r: COIN_FRONT.r + COIN_GAP, fill: accent }),
|
|
823
|
+
/* @__PURE__ */ jsx("circle", { cx: COIN_FRONT.cx, cy: COIN_FRONT.cy, r: COIN_FRONT.r, fill: front }),
|
|
824
|
+
accent && /* @__PURE__ */ jsx(
|
|
825
|
+
"circle",
|
|
826
|
+
{
|
|
827
|
+
cx: COIN_FRONT.cx,
|
|
828
|
+
cy: COIN_FRONT.cy,
|
|
829
|
+
r: COIN_FRONT.r - 2,
|
|
830
|
+
stroke: accent,
|
|
831
|
+
strokeWidth: width,
|
|
832
|
+
fill: "none"
|
|
833
|
+
}
|
|
834
|
+
)
|
|
835
|
+
] });
|
|
836
|
+
}
|
|
805
837
|
const NtdCoins = /* @__PURE__ */ createIcon({
|
|
806
838
|
displayName: "NtdCoins",
|
|
807
839
|
paths: {
|
|
808
|
-
solid: ({ primaryColor,
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
/* @__PURE__ */
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
840
|
+
solid: ({ primaryColor, accentColor, strokeWidth }) => coins(primaryColor, primaryColor, accentColor, strokeWidth),
|
|
841
|
+
outline: ({ primaryColor, strokeWidth, uid }) => {
|
|
842
|
+
const mask = uid ? `${uid}-coins` : void 0;
|
|
843
|
+
return /* @__PURE__ */ jsxs("g", { stroke: primaryColor, strokeWidth, fill: "none", children: [
|
|
844
|
+
mask && /* @__PURE__ */ jsxs("mask", { id: mask, children: [
|
|
845
|
+
/* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "24", fill: "white", stroke: "none" }),
|
|
846
|
+
/* @__PURE__ */ jsx(
|
|
847
|
+
"circle",
|
|
848
|
+
{
|
|
849
|
+
cx: COIN_FRONT.cx,
|
|
850
|
+
cy: COIN_FRONT.cy,
|
|
851
|
+
r: COIN_FRONT.r + COIN_GAP,
|
|
852
|
+
fill: "black",
|
|
853
|
+
stroke: "none"
|
|
854
|
+
}
|
|
855
|
+
)
|
|
856
|
+
] }),
|
|
857
|
+
/* @__PURE__ */ jsxs("g", { mask: mask ? `url(#${mask})` : void 0, children: [
|
|
858
|
+
/* @__PURE__ */ jsx("circle", { cx: COIN_BACK.cx, cy: COIN_BACK.cy, r: COIN_BACK.r - strokeWidth / 2 }),
|
|
859
|
+
/* @__PURE__ */ jsx("circle", { cx: COIN_BACK.cx, cy: COIN_BACK.cy, r: COIN_BACK.r - 1.9 })
|
|
860
|
+
] }),
|
|
861
|
+
/* @__PURE__ */ jsx("circle", { cx: COIN_FRONT.cx, cy: COIN_FRONT.cy, r: COIN_FRONT.r - strokeWidth / 2 }),
|
|
862
|
+
/* @__PURE__ */ jsx("circle", { cx: COIN_FRONT.cx, cy: COIN_FRONT.cy, r: COIN_FRONT.r - 2 })
|
|
863
|
+
] });
|
|
864
|
+
},
|
|
865
|
+
duotone: ({ primaryColor, secondaryColor, strokeWidth }) => coins(secondaryColor, primaryColor, void 0, strokeWidth),
|
|
866
|
+
vivid: ({ primaryColor, secondaryColor, accentColor, strokeWidth }) => coins(secondaryColor, primaryColor, accentColor, strokeWidth)
|
|
831
867
|
}
|
|
832
868
|
});
|
|
833
869
|
const NtdKanban = /* @__PURE__ */ createIcon({
|
package/dist/esm/icons/files.js
CHANGED
|
@@ -633,47 +633,29 @@ const NtdPackage = /* @__PURE__ */ createIcon({
|
|
|
633
633
|
] })
|
|
634
634
|
}
|
|
635
635
|
});
|
|
636
|
+
const LAYERS_TOP = "M12 3.9L21.5 8.7L12 13.5L2.5 8.7Z";
|
|
637
|
+
const LAYERS_UNDER = "M2.5 9.8L12 14.6L21.5 9.8V12L12 16.8L2.5 12ZM2.5 13.1L12 17.9L21.5 13.1V15.3L12 20.1L2.5 15.3Z";
|
|
638
|
+
function layers(top, under, round = false) {
|
|
639
|
+
const rounded = round ? (
|
|
640
|
+
// round joins, thin enough to keep the 1.1 gaps open
|
|
641
|
+
{ stroke: void 0, strokeWidth: 0.4, strokeLinejoin: "round" }
|
|
642
|
+
) : void 0;
|
|
643
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
644
|
+
/* @__PURE__ */ jsx("path", { d: LAYERS_UNDER, fill: under, ...rounded && { ...rounded, stroke: under } }),
|
|
645
|
+
/* @__PURE__ */ jsx("path", { d: LAYERS_TOP, fill: top, ...rounded && { ...rounded, stroke: top } })
|
|
646
|
+
] });
|
|
647
|
+
}
|
|
636
648
|
const NtdLayers = /* @__PURE__ */ createIcon({
|
|
637
649
|
displayName: "NtdLayers",
|
|
638
650
|
paths: {
|
|
639
|
-
solid: ({ primaryColor
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
/* @__PURE__ */ jsx("path", { d:
|
|
643
|
-
|
|
644
|
-
outline: ({ primaryColor, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
645
|
-
/* @__PURE__ */ jsx(
|
|
646
|
-
"path",
|
|
647
|
-
{
|
|
648
|
-
d: "M12 2L2 7l10 5 10-5-10-5z",
|
|
649
|
-
stroke: primaryColor,
|
|
650
|
-
strokeWidth,
|
|
651
|
-
fill: "none"
|
|
652
|
-
}
|
|
653
|
-
),
|
|
654
|
-
/* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5", stroke: primaryColor, strokeWidth, fill: "none" }),
|
|
655
|
-
/* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5", stroke: primaryColor, strokeWidth, fill: "none" })
|
|
656
|
-
] }),
|
|
657
|
-
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
658
|
-
/* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: secondaryColor, opacity: secondaryOpacity }),
|
|
659
|
-
/* @__PURE__ */ jsx(
|
|
660
|
-
"path",
|
|
661
|
-
{
|
|
662
|
-
d: "M12 2L2 7l10 5 10-5-10-5z",
|
|
663
|
-
stroke: primaryColor,
|
|
664
|
-
strokeWidth,
|
|
665
|
-
fill: "none"
|
|
666
|
-
}
|
|
667
|
-
),
|
|
668
|
-
/* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5", stroke: primaryColor, strokeWidth, fill: "none" }),
|
|
669
|
-
/* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5", stroke: primaryColor, strokeWidth, fill: "none" })
|
|
651
|
+
solid: ({ primaryColor }) => layers(primaryColor, primaryColor),
|
|
652
|
+
rounded: ({ primaryColor }) => layers(primaryColor, primaryColor, true),
|
|
653
|
+
outline: ({ primaryColor, strokeWidth }) => /* @__PURE__ */ jsxs("g", { stroke: primaryColor, strokeWidth, strokeLinejoin: "miter", fill: "none", children: [
|
|
654
|
+
/* @__PURE__ */ jsx("path", { d: LAYERS_TOP }),
|
|
655
|
+
/* @__PURE__ */ jsx("path", { d: LAYERS_UNDER })
|
|
670
656
|
] }),
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
/* @__PURE__ */ jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z", fill: "white", opacity: "0.1" }),
|
|
674
|
-
/* @__PURE__ */ jsx("path", { d: "M2 17l10 5 10-5", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }),
|
|
675
|
-
/* @__PURE__ */ jsx("path", { d: "M2 12l10 5 10-5", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })
|
|
676
|
-
] })
|
|
657
|
+
duotone: ({ primaryColor, secondaryColor }) => layers(primaryColor, secondaryColor),
|
|
658
|
+
vivid: ({ primaryColor, secondaryColor }) => layers(primaryColor, secondaryColor)
|
|
677
659
|
}
|
|
678
660
|
});
|
|
679
661
|
const NtdGrid = /* @__PURE__ */ createIcon({
|
|
@@ -1553,7 +1535,7 @@ const NtdTarget = /* @__PURE__ */ createIcon({
|
|
|
1553
1535
|
}
|
|
1554
1536
|
),
|
|
1555
1537
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth, fill: "none" }),
|
|
1556
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "
|
|
1538
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4", fill: primaryColor })
|
|
1557
1539
|
] }),
|
|
1558
1540
|
outline: ({ primaryColor, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1559
1541
|
/* @__PURE__ */ jsx(
|
|
@@ -1568,7 +1550,17 @@ const NtdTarget = /* @__PURE__ */ createIcon({
|
|
|
1568
1550
|
}
|
|
1569
1551
|
),
|
|
1570
1552
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth, fill: "none" }),
|
|
1571
|
-
/* @__PURE__ */ jsx(
|
|
1553
|
+
/* @__PURE__ */ jsx(
|
|
1554
|
+
"circle",
|
|
1555
|
+
{
|
|
1556
|
+
cx: "12",
|
|
1557
|
+
cy: "12",
|
|
1558
|
+
r: "1.4",
|
|
1559
|
+
stroke: primaryColor,
|
|
1560
|
+
strokeWidth,
|
|
1561
|
+
fill: "none"
|
|
1562
|
+
}
|
|
1563
|
+
)
|
|
1572
1564
|
] }),
|
|
1573
1565
|
duotone: ({ primaryColor, secondaryColor, secondaryOpacity, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1574
1566
|
/* @__PURE__ */ jsx(
|
|
@@ -1595,28 +1587,28 @@ const NtdTarget = /* @__PURE__ */ createIcon({
|
|
|
1595
1587
|
}
|
|
1596
1588
|
),
|
|
1597
1589
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6", stroke: primaryColor, strokeWidth, fill: "none" }),
|
|
1598
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "
|
|
1590
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4", fill: primaryColor })
|
|
1599
1591
|
] }),
|
|
1600
1592
|
vivid: ({ primaryColor, secondaryColor }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1601
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "
|
|
1602
|
-
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "
|
|
1593
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4", fill: primaryColor }),
|
|
1594
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.4", fill: "white", opacity: "0.1" }),
|
|
1603
1595
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: secondaryColor, strokeWidth: "1.8", fill: "none" }),
|
|
1604
1596
|
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6", stroke: "#3B82F6", strokeWidth: "1.5", fill: "none" })
|
|
1605
1597
|
] })
|
|
1606
1598
|
}
|
|
1607
1599
|
});
|
|
1608
|
-
const TRUCK_BODY = "M2
|
|
1609
|
-
const TRUCK_BODY_ROUNDED = "M4
|
|
1610
|
-
const TRUCK_BOX = "M2
|
|
1611
|
-
const TRUCK_CAB = "M15.5
|
|
1600
|
+
const TRUCK_BODY = "M2 4.5h13a1 1 0 011 1V9h4l3 3v4.5H2a1 1 0 01-1-1v-10a1 1 0 011-1z";
|
|
1601
|
+
const TRUCK_BODY_ROUNDED = "M4 4.5h9a3 3 0 013 3V9h4l3 3v2.5a2 2 0 01-2 2H4a3 3 0 01-3-3v-7a3 3 0 013-3z";
|
|
1602
|
+
const TRUCK_BOX = "M2 4.5h13a1 1 0 011 1v11H2a1 1 0 01-1-1v-10a1 1 0 011-1z";
|
|
1603
|
+
const TRUCK_CAB = "M15.5 9H20l3 3v4.5h-7.5z";
|
|
1612
1604
|
const TRUCK_WHEELS = [5.5, 18.5];
|
|
1613
1605
|
function truckWheels(fill, ring, opacity) {
|
|
1614
1606
|
return TRUCK_WHEELS.map((cx) => /* @__PURE__ */ jsx(
|
|
1615
1607
|
"circle",
|
|
1616
1608
|
{
|
|
1617
1609
|
cx,
|
|
1618
|
-
cy: "
|
|
1619
|
-
r: "
|
|
1610
|
+
cy: "17.4",
|
|
1611
|
+
r: "3",
|
|
1620
1612
|
fill,
|
|
1621
1613
|
stroke: ring,
|
|
1622
1614
|
strokeWidth: "1.5",
|
|
@@ -1637,14 +1629,22 @@ const NtdTruck = /* @__PURE__ */ createIcon({
|
|
|
1637
1629
|
solid: (props) => truckSolid(TRUCK_BODY, props),
|
|
1638
1630
|
rounded: (props) => truckSolid(TRUCK_BODY_ROUNDED, props),
|
|
1639
1631
|
outline: ({ primaryColor, strokeWidth }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1640
|
-
/* @__PURE__ */ jsx("path", { d: "M1
|
|
1641
|
-
/* @__PURE__ */ jsx(
|
|
1632
|
+
/* @__PURE__ */ jsx("path", { d: "M1 4.5h15v12H1z", stroke: primaryColor, strokeWidth, fill: "none" }),
|
|
1633
|
+
/* @__PURE__ */ jsx(
|
|
1634
|
+
"path",
|
|
1635
|
+
{
|
|
1636
|
+
d: "M16 9h4l3 3v4.5h-7V9z",
|
|
1637
|
+
stroke: primaryColor,
|
|
1638
|
+
strokeWidth,
|
|
1639
|
+
fill: "none"
|
|
1640
|
+
}
|
|
1641
|
+
),
|
|
1642
1642
|
/* @__PURE__ */ jsx(
|
|
1643
1643
|
"circle",
|
|
1644
1644
|
{
|
|
1645
1645
|
cx: "5.5",
|
|
1646
|
-
cy: "
|
|
1647
|
-
r: "
|
|
1646
|
+
cy: "17.4",
|
|
1647
|
+
r: "3",
|
|
1648
1648
|
stroke: primaryColor,
|
|
1649
1649
|
strokeWidth,
|
|
1650
1650
|
fill: "none"
|
|
@@ -1654,8 +1654,8 @@ const NtdTruck = /* @__PURE__ */ createIcon({
|
|
|
1654
1654
|
"circle",
|
|
1655
1655
|
{
|
|
1656
1656
|
cx: "18.5",
|
|
1657
|
-
cy: "
|
|
1658
|
-
r: "
|
|
1657
|
+
cy: "17.4",
|
|
1658
|
+
r: "3",
|
|
1659
1659
|
stroke: primaryColor,
|
|
1660
1660
|
strokeWidth,
|
|
1661
1661
|
fill: "none"
|