feat: Add 5 new collection icons
This commit is contained in:
parent
c1bd30aac8
commit
bcca4b91ee
|
@ -6,11 +6,13 @@ import {
|
|||
AcademicCapIcon,
|
||||
BeakerIcon,
|
||||
BuildingBlocksIcon,
|
||||
CameraIcon,
|
||||
CloudIcon,
|
||||
CodeIcon,
|
||||
EditIcon,
|
||||
EmailIcon,
|
||||
EyeIcon,
|
||||
InfoIcon,
|
||||
ImageIcon,
|
||||
LeafIcon,
|
||||
LightBulbIcon,
|
||||
|
@ -19,10 +21,13 @@ import {
|
|||
NotepadIcon,
|
||||
PadlockIcon,
|
||||
PaletteIcon,
|
||||
PromoteIcon,
|
||||
QuestionMarkIcon,
|
||||
SportIcon,
|
||||
SunIcon,
|
||||
TargetIcon,
|
||||
ToolsIcon,
|
||||
VehicleIcon,
|
||||
WarningIcon,
|
||||
} from "outline-icons";
|
||||
import * as React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
@ -56,6 +61,10 @@ export const icons = {
|
|||
component: CoinsIcon,
|
||||
keywords: "coins money finance sales income revenue cash",
|
||||
},
|
||||
camera: {
|
||||
component: CameraIcon,
|
||||
keywords: "photo picture",
|
||||
},
|
||||
academicCap: {
|
||||
component: AcademicCapIcon,
|
||||
keywords: "learn teach lesson guide tutorial onboarding training",
|
||||
|
@ -84,6 +93,10 @@ export const icons = {
|
|||
component: EyeIcon,
|
||||
keywords: "eye view",
|
||||
},
|
||||
info: {
|
||||
component: InfoIcon,
|
||||
keywords: "info information",
|
||||
},
|
||||
image: {
|
||||
component: ImageIcon,
|
||||
keywords: "image photo picture",
|
||||
|
@ -120,6 +133,10 @@ export const icons = {
|
|||
component: EditIcon,
|
||||
keywords: "copy writing post blog",
|
||||
},
|
||||
promote: {
|
||||
component: PromoteIcon,
|
||||
keywords: "marketing promotion",
|
||||
},
|
||||
question: {
|
||||
component: QuestionMarkIcon,
|
||||
keywords: "question help support faq",
|
||||
|
@ -128,14 +145,22 @@ export const icons = {
|
|||
component: SunIcon,
|
||||
keywords: "day sun weather",
|
||||
},
|
||||
sport: {
|
||||
component: SportIcon,
|
||||
keywords: "sport outdoor racket game",
|
||||
},
|
||||
target: {
|
||||
component: TargetIcon,
|
||||
keywords: "target goal sales",
|
||||
},
|
||||
tools: {
|
||||
component: ToolsIcon,
|
||||
keywords: "tool settings",
|
||||
},
|
||||
vehicle: {
|
||||
component: VehicleIcon,
|
||||
keywords: "truck car travel transport",
|
||||
},
|
||||
warning: {
|
||||
component: WarningIcon,
|
||||
keywords: "danger",
|
||||
},
|
||||
};
|
||||
|
||||
const colors = [
|
||||
|
@ -164,7 +189,6 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
|
|||
modal: true,
|
||||
placement: "bottom-end",
|
||||
});
|
||||
const Component = icons[icon || "collection"].component;
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
|
@ -174,14 +198,17 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
|
|||
<MenuButton {...menu}>
|
||||
{(props) => (
|
||||
<Button aria-label={t("Show menu")} {...props}>
|
||||
<Component color={color} size={30} />
|
||||
<Icon
|
||||
as={icons[icon || "collection"].component}
|
||||
color={color}
|
||||
size={30}
|
||||
/>
|
||||
</Button>
|
||||
)}
|
||||
</MenuButton>
|
||||
<ContextMenu {...menu} onOpen={onOpen} aria-label={t("Choose icon")}>
|
||||
<Icons>
|
||||
{Object.keys(icons).map((name) => {
|
||||
const Component = icons[name].component;
|
||||
return (
|
||||
<MenuItem
|
||||
key={name}
|
||||
|
@ -190,7 +217,7 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
|
|||
>
|
||||
{(props) => (
|
||||
<IconButton style={style} {...props}>
|
||||
<Component color={color} size={30} />
|
||||
<Icon as={icons[name].component} color={color} size={30} />
|
||||
</IconButton>
|
||||
)}
|
||||
</MenuItem>
|
||||
|
@ -212,6 +239,10 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
const Icon = styled.svg`
|
||||
transition: fill 150ms ease-in-out;
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
display: block;
|
||||
`;
|
||||
|
|
|
@ -116,7 +116,7 @@
|
|||
"mobx-react": "^6.3.1",
|
||||
"natural-sort": "^1.0.0",
|
||||
"nodemailer": "^6.4.16",
|
||||
"outline-icons": "^1.31.0",
|
||||
"outline-icons": "^1.33.0",
|
||||
"oy-vey": "^0.10.0",
|
||||
"passport": "^0.4.1",
|
||||
"passport-google-oauth2": "^0.2.0",
|
||||
|
|
|
@ -10654,10 +10654,10 @@ os-name@^3.1.0:
|
|||
macos-release "^2.2.0"
|
||||
windows-release "^3.1.0"
|
||||
|
||||
outline-icons@^1.26.1, outline-icons@^1.31.0:
|
||||
version "1.31.0"
|
||||
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.31.0.tgz#c373667442300afdb1a9fd6059180833c6123fcb"
|
||||
integrity sha512-pe2vSI1mR4bJaWpmTitniyNpu4oq8dVObOweh/H6EON+12w2QDRtJZ6A6Bkc2vjlb2ZRYcZasisJI9VBUuTnHQ==
|
||||
outline-icons@^1.26.1, outline-icons@^1.33.0:
|
||||
version "1.33.0"
|
||||
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.33.0.tgz#eb022b170977eb977ab531941f2976f95860a6df"
|
||||
integrity sha512-Ib2kEZ+2rlidyLJa9istA5k0GSV6731PXlKMJ2o4qzzO9h+AoxPeSmE7Rx3ZzrZDCYDMuruWcOLyNWjwu1/bLw==
|
||||
|
||||
oy-vey@^0.10.0:
|
||||
version "0.10.0"
|
||||
|
|
Reference in New Issue