Add 80+ additional icons from FontAwesome (#6803)
* Add 80+ additional icons from FontAwesome * fix: color switch transition, add 6 more icons to fill out grid * Add strict validation for collection icon * fix: Avoid import from app in server
This commit is contained in:
Tom Moor
GitHub
38
shared/components/Flex.tsx
Normal file
38
shared/components/Flex.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import { CSSProperties } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
type JustifyValues = CSSProperties["justifyContent"];
|
||||
|
||||
type AlignValues = CSSProperties["alignItems"];
|
||||
|
||||
const Flex = styled.div<{
|
||||
auto?: boolean;
|
||||
column?: boolean;
|
||||
align?: AlignValues;
|
||||
justify?: JustifyValues;
|
||||
wrap?: boolean;
|
||||
shrink?: boolean;
|
||||
reverse?: boolean;
|
||||
gap?: number;
|
||||
}>`
|
||||
display: flex;
|
||||
flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
|
||||
flex-direction: ${({ column, reverse }) =>
|
||||
reverse
|
||||
? column
|
||||
? "column-reverse"
|
||||
: "row-reverse"
|
||||
: column
|
||||
? "column"
|
||||
: "row"};
|
||||
align-items: ${({ align }) => align};
|
||||
justify-content: ${({ justify }) => justify};
|
||||
flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")};
|
||||
flex-shrink: ${({ shrink }) =>
|
||||
shrink === true ? 1 : shrink === false ? 0 : "initial"};
|
||||
gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
`;
|
||||
|
||||
export default Flex;
|
||||
35
shared/components/LetterIcon.tsx
Normal file
35
shared/components/LetterIcon.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import { s } from "../styles";
|
||||
import Squircle from "./Squircle";
|
||||
|
||||
type Props = {
|
||||
/** The width and height of the icon, including standard padding. */
|
||||
size?: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* A squircle shaped icon with a letter inside, used for collections.
|
||||
*/
|
||||
const LetterIcon = ({ children, size = 24, ...rest }: Props) => (
|
||||
<LetterIconWrapper $size={size}>
|
||||
<Squircle size={Math.round(size * 0.66)} {...rest}>
|
||||
{children}
|
||||
</Squircle>
|
||||
</LetterIconWrapper>
|
||||
);
|
||||
|
||||
const LetterIconWrapper = styled.div<{ $size: number }>`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: ${({ $size }) => $size}px;
|
||||
height: ${({ $size }) => $size}px;
|
||||
|
||||
font-weight: 700;
|
||||
font-size: ${({ $size }) => $size / 2}px;
|
||||
color: ${s("background")};
|
||||
`;
|
||||
|
||||
export default LetterIcon;
|
||||
47
shared/components/Squircle.tsx
Normal file
47
shared/components/Squircle.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import Flex from "./Flex";
|
||||
|
||||
type Props = {
|
||||
/** The width and height of the squircle */
|
||||
size?: number;
|
||||
/** The color of the squircle */
|
||||
color?: string;
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Squircle: React.FC<Props> = ({
|
||||
color,
|
||||
size = 28,
|
||||
children,
|
||||
className,
|
||||
}: Props) => (
|
||||
<Wrapper size={size} align="center" justify="center" className={className}>
|
||||
<svg width={size} height={size} fill={color} viewBox="0 0 28 28">
|
||||
<path d="M0 11.1776C0 1.97285 1.97285 0 11.1776 0H16.8224C26.0272 0 28 1.97285 28 11.1776V16.8224C28 26.0272 26.0272 28 16.8224 28H11.1776C1.97285 28 0 26.0272 0 16.8224V11.1776Z" />
|
||||
</svg>
|
||||
<Content>{children}</Content>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
const Wrapper = styled(Flex)<{ size: number }>`
|
||||
position: relative;
|
||||
width: ${(props) => props.size}px;
|
||||
height: ${(props) => props.size}px;
|
||||
|
||||
svg {
|
||||
transition: fill 150ms ease-in-out;
|
||||
transition-delay: var(--delay);
|
||||
}
|
||||
`;
|
||||
|
||||
const Content = styled.div`
|
||||
display: flex;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
`;
|
||||
|
||||
export default Squircle;
|
||||
@@ -238,7 +238,8 @@
|
||||
"{{authorName}} created <3></3>": "{{authorName}} created <3></3>",
|
||||
"{{authorName}} opened <3></3>": "{{authorName}} opened <3></3>",
|
||||
"Show menu": "Show menu",
|
||||
"Choose icon": "Choose icon",
|
||||
"Choose an icon": "Choose an icon",
|
||||
"Filter": "Filter",
|
||||
"Loading": "Loading",
|
||||
"Select a color": "Select a color",
|
||||
"Search": "Search",
|
||||
@@ -864,7 +865,6 @@
|
||||
"Enterprise": "Enterprise",
|
||||
"Recent imports": "Recent imports",
|
||||
"Everyone that has signed into {{appName}} is listed here. It’s possible that there are other users who have access through {{signinMethods}} but haven’t signed in yet.": "Everyone that has signed into {{appName}} is listed here. It’s possible that there are other users who have access through {{signinMethods}} but haven’t signed in yet.",
|
||||
"Filter": "Filter",
|
||||
"Receive a notification whenever a new document is published": "Receive a notification whenever a new document is published",
|
||||
"Document updated": "Document updated",
|
||||
"Receive a notification when a document you are subscribed to is edited": "Receive a notification when a document you are subscribed to is edited",
|
||||
|
||||
557
shared/utils/IconLibrary.tsx
Normal file
557
shared/utils/IconLibrary.tsx
Normal file
@@ -0,0 +1,557 @@
|
||||
import {
|
||||
faHeart,
|
||||
faWandSparkles,
|
||||
faUmbrella,
|
||||
faMugHot,
|
||||
faBook,
|
||||
faDroplet,
|
||||
faBrush,
|
||||
faSnowflake,
|
||||
faShop,
|
||||
faShirt,
|
||||
faBagShopping,
|
||||
faGauge,
|
||||
faMountainSun,
|
||||
faPassport,
|
||||
faPhoneVolume,
|
||||
faNewspaper,
|
||||
faNetworkWired,
|
||||
faRocket,
|
||||
faStarOfLife,
|
||||
faSeedling,
|
||||
faTrain,
|
||||
faMicrochip,
|
||||
faRecordVinyl,
|
||||
faTrophy,
|
||||
faHammer,
|
||||
faRobot,
|
||||
faCrown,
|
||||
faCube,
|
||||
faRoad,
|
||||
faPuzzlePiece,
|
||||
faIndustry,
|
||||
faWorm,
|
||||
faVault,
|
||||
faUtensils,
|
||||
faUserGraduate,
|
||||
faUniversalAccess,
|
||||
faTractor,
|
||||
faTent,
|
||||
faSpa,
|
||||
faSocks,
|
||||
faScissors,
|
||||
faSailboat,
|
||||
faPizzaSlice,
|
||||
faPaw,
|
||||
faMap,
|
||||
faLaptopCode,
|
||||
faKitMedical,
|
||||
faFaceSurprise,
|
||||
faFaceSmileWink,
|
||||
faFaceSmileBeam,
|
||||
faFaceMeh,
|
||||
faFaceLaugh,
|
||||
faFaceGrinStars,
|
||||
faFaceDizzy,
|
||||
faDog,
|
||||
faCrow,
|
||||
faCompactDisc,
|
||||
faClapperboard,
|
||||
faFeather,
|
||||
faFish,
|
||||
faCat,
|
||||
faTree,
|
||||
faShield,
|
||||
faLaptop,
|
||||
faDisplay,
|
||||
faPrescription,
|
||||
faWheelchairMove,
|
||||
faGift,
|
||||
faMagnet,
|
||||
faPaintRoller,
|
||||
faGamepad,
|
||||
faCookieBite,
|
||||
faTowerCell,
|
||||
faTooth,
|
||||
faDollarSign,
|
||||
faSterlingSign,
|
||||
faYenSign,
|
||||
faPesoSign,
|
||||
faRainbow,
|
||||
faPenRuler,
|
||||
faSwatchbook,
|
||||
faStarAndCrescent,
|
||||
faSolarPanel,
|
||||
faUmbrellaBeach,
|
||||
faGem,
|
||||
faDna,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import intersection from "lodash/intersection";
|
||||
import {
|
||||
BookmarkedIcon,
|
||||
BicycleIcon,
|
||||
AcademicCapIcon,
|
||||
BeakerIcon,
|
||||
BuildingBlocksIcon,
|
||||
BrowserIcon,
|
||||
CollectionIcon,
|
||||
CoinsIcon,
|
||||
CameraIcon,
|
||||
CarrotIcon,
|
||||
FlameIcon,
|
||||
HashtagIcon,
|
||||
GraphIcon,
|
||||
InternetIcon,
|
||||
LibraryIcon,
|
||||
PlaneIcon,
|
||||
RamenIcon,
|
||||
CloudIcon,
|
||||
CodeIcon,
|
||||
EditIcon,
|
||||
EmailIcon,
|
||||
EyeIcon,
|
||||
GlobeIcon,
|
||||
InfoIcon,
|
||||
IceCreamIcon,
|
||||
ImageIcon,
|
||||
LeafIcon,
|
||||
LightBulbIcon,
|
||||
MathIcon,
|
||||
MoonIcon,
|
||||
NotepadIcon,
|
||||
TeamIcon,
|
||||
PadlockIcon,
|
||||
PaletteIcon,
|
||||
PromoteIcon,
|
||||
QuestionMarkIcon,
|
||||
SportIcon,
|
||||
SunIcon,
|
||||
ShapesIcon,
|
||||
TargetIcon,
|
||||
TerminalIcon,
|
||||
ToolsIcon,
|
||||
VehicleIcon,
|
||||
WarningIcon,
|
||||
DatabaseIcon,
|
||||
SmileyIcon,
|
||||
LightningIcon,
|
||||
ClockIcon,
|
||||
DoneIcon,
|
||||
FeedbackIcon,
|
||||
ServerRackIcon,
|
||||
ThumbsUpIcon,
|
||||
TruckIcon,
|
||||
} from "outline-icons";
|
||||
import * as React from "react";
|
||||
import styled from "styled-components";
|
||||
import LetterIcon from "../components/LetterIcon";
|
||||
|
||||
type IconMapping = {
|
||||
component: React.ComponentType<FAProps>;
|
||||
keywords?: string;
|
||||
};
|
||||
|
||||
type FAProps = {
|
||||
color?: string;
|
||||
size?: number;
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
export class IconLibrary {
|
||||
/**
|
||||
* Get the component for a given icon name
|
||||
*
|
||||
* @param icon The name of the icon
|
||||
* @returns The component for the icon
|
||||
*/
|
||||
public static getComponent(icon: string) {
|
||||
return this.mapping[icon].component;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find an icon by keyword. This is useful for searching for an icon based on a user's input.
|
||||
*
|
||||
* @param keyword The keyword to search for
|
||||
* @returns The name of the icon that matches the keyword, or undefined if no match is found
|
||||
*/
|
||||
public static findIconByKeyword(keyword: string) {
|
||||
const keys = Object.keys(this.mapping);
|
||||
|
||||
for (const key of keys) {
|
||||
const icon = this.mapping[key];
|
||||
const keywords = icon.keywords?.split(" ");
|
||||
const namewords = keyword.toLocaleLowerCase().split(" ");
|
||||
const matches = intersection(namewords, keywords);
|
||||
|
||||
if (matches.length > 0) {
|
||||
return key;
|
||||
}
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find icons.
|
||||
*
|
||||
* @param query The query to search for
|
||||
* @returns The icon results.
|
||||
*/
|
||||
public static findIcons(query: string) {
|
||||
return Object.keys(this.mapping)
|
||||
.map((key) => {
|
||||
const icon = this.mapping[key];
|
||||
const keywords = `${icon.keywords ?? ""} ${key}`;
|
||||
|
||||
if (keywords.includes(query.toLocaleLowerCase())) {
|
||||
return key;
|
||||
}
|
||||
return undefined;
|
||||
})
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
/**
|
||||
* A map of all icons available to end users in the app. This does not include icons that are used
|
||||
* internally only, which can be imported from `outline-icons` directly.
|
||||
*/
|
||||
public static mapping: Record<string, IconMapping> = {
|
||||
// Internal icons
|
||||
academicCap: {
|
||||
component: AcademicCapIcon,
|
||||
keywords: "learn teach lesson guide tutorial onboarding training",
|
||||
},
|
||||
bicycle: {
|
||||
component: BicycleIcon,
|
||||
keywords: "bicycle bike cycle",
|
||||
},
|
||||
beaker: {
|
||||
component: BeakerIcon,
|
||||
keywords: "lab research experiment test",
|
||||
},
|
||||
buildingBlocks: {
|
||||
component: BuildingBlocksIcon,
|
||||
keywords: "app blocks product prototype",
|
||||
},
|
||||
bookmark: {
|
||||
component: BookmarkedIcon,
|
||||
keywords: "bookmark",
|
||||
},
|
||||
browser: {
|
||||
component: BrowserIcon,
|
||||
keywords: "browser web app",
|
||||
},
|
||||
collection: {
|
||||
component: CollectionIcon,
|
||||
keywords: "collection",
|
||||
},
|
||||
coins: {
|
||||
component: CoinsIcon,
|
||||
keywords: "coins money finance sales income revenue cash",
|
||||
},
|
||||
camera: {
|
||||
component: CameraIcon,
|
||||
keywords: "photo picture",
|
||||
},
|
||||
carrot: {
|
||||
component: CarrotIcon,
|
||||
keywords: "food vegetable produce",
|
||||
},
|
||||
clock: {
|
||||
component: ClockIcon,
|
||||
keywords: "time",
|
||||
},
|
||||
cloud: {
|
||||
component: CloudIcon,
|
||||
keywords: "cloud service aws infrastructure",
|
||||
},
|
||||
code: {
|
||||
component: CodeIcon,
|
||||
keywords: "developer api code development engineering programming",
|
||||
},
|
||||
database: {
|
||||
component: DatabaseIcon,
|
||||
keywords: "server ops database",
|
||||
},
|
||||
done: {
|
||||
component: DoneIcon,
|
||||
keywords: "checkmark success complete finished",
|
||||
},
|
||||
email: {
|
||||
component: EmailIcon,
|
||||
keywords: "email at",
|
||||
},
|
||||
eye: {
|
||||
component: EyeIcon,
|
||||
keywords: "eye view",
|
||||
},
|
||||
feedback: {
|
||||
component: FeedbackIcon,
|
||||
keywords: "faq help support",
|
||||
},
|
||||
flame: {
|
||||
component: FlameIcon,
|
||||
keywords: "fire flame hot",
|
||||
},
|
||||
graph: {
|
||||
component: GraphIcon,
|
||||
keywords: "chart analytics data",
|
||||
},
|
||||
globe: {
|
||||
component: GlobeIcon,
|
||||
keywords: "world translate",
|
||||
},
|
||||
hashtag: {
|
||||
component: HashtagIcon,
|
||||
keywords: "social media tag",
|
||||
},
|
||||
info: {
|
||||
component: InfoIcon,
|
||||
keywords: "info information",
|
||||
},
|
||||
icecream: {
|
||||
component: IceCreamIcon,
|
||||
keywords: "food dessert cone scoop",
|
||||
},
|
||||
image: {
|
||||
component: ImageIcon,
|
||||
keywords: "image photo picture",
|
||||
},
|
||||
internet: {
|
||||
component: InternetIcon,
|
||||
keywords: "network global globe world",
|
||||
},
|
||||
leaf: {
|
||||
component: LeafIcon,
|
||||
keywords: "leaf plant outdoors nature ecosystem climate",
|
||||
},
|
||||
library: {
|
||||
component: LibraryIcon,
|
||||
keywords: "library collection archive",
|
||||
},
|
||||
lightbulb: {
|
||||
component: LightBulbIcon,
|
||||
keywords: "lightbulb idea",
|
||||
},
|
||||
lightning: {
|
||||
component: LightningIcon,
|
||||
keywords: "lightning fast zap",
|
||||
},
|
||||
letter: {
|
||||
component: LetterIcon,
|
||||
keywords: "letter",
|
||||
},
|
||||
math: {
|
||||
component: MathIcon,
|
||||
keywords: "math formula",
|
||||
},
|
||||
moon: {
|
||||
component: MoonIcon,
|
||||
keywords: "night moon dark",
|
||||
},
|
||||
notepad: {
|
||||
component: NotepadIcon,
|
||||
keywords: "journal notepad write notes",
|
||||
},
|
||||
padlock: {
|
||||
component: PadlockIcon,
|
||||
keywords: "padlock private security authentication authorization auth",
|
||||
},
|
||||
palette: {
|
||||
component: PaletteIcon,
|
||||
keywords: "design palette art brand",
|
||||
},
|
||||
pencil: {
|
||||
component: EditIcon,
|
||||
keywords: "copy writing post blog",
|
||||
},
|
||||
plane: {
|
||||
component: PlaneIcon,
|
||||
keywords: "airplane travel flight trip vacation",
|
||||
},
|
||||
promote: {
|
||||
component: PromoteIcon,
|
||||
keywords: "marketing promotion",
|
||||
},
|
||||
ramen: {
|
||||
component: RamenIcon,
|
||||
keywords: "soup food noodle bowl meal",
|
||||
},
|
||||
question: {
|
||||
component: QuestionMarkIcon,
|
||||
keywords: "question help support faq",
|
||||
},
|
||||
server: {
|
||||
component: ServerRackIcon,
|
||||
keywords: "ops infra server",
|
||||
},
|
||||
sun: {
|
||||
component: SunIcon,
|
||||
keywords: "day sun weather",
|
||||
},
|
||||
shapes: {
|
||||
component: ShapesIcon,
|
||||
keywords: "blocks toy",
|
||||
},
|
||||
sport: {
|
||||
component: SportIcon,
|
||||
keywords: "sport outdoor racket game",
|
||||
},
|
||||
smiley: {
|
||||
component: SmileyIcon,
|
||||
keywords: "emoji smiley happy",
|
||||
},
|
||||
target: {
|
||||
component: TargetIcon,
|
||||
keywords: "target goal sales",
|
||||
},
|
||||
team: {
|
||||
component: TeamIcon,
|
||||
keywords: "team building organization office",
|
||||
},
|
||||
terminal: {
|
||||
component: TerminalIcon,
|
||||
keywords: "terminal code",
|
||||
},
|
||||
thumbsup: {
|
||||
component: ThumbsUpIcon,
|
||||
keywords: "like social favorite upvote",
|
||||
},
|
||||
truck: {
|
||||
component: TruckIcon,
|
||||
keywords: "truck transport vehicle",
|
||||
},
|
||||
tools: {
|
||||
component: ToolsIcon,
|
||||
keywords: "tool settings",
|
||||
},
|
||||
vehicle: {
|
||||
component: VehicleIcon,
|
||||
keywords: "truck car travel transport",
|
||||
},
|
||||
warning: {
|
||||
component: WarningIcon,
|
||||
keywords: "warning alert error",
|
||||
},
|
||||
|
||||
// Font awesome
|
||||
...Object.fromEntries(
|
||||
[
|
||||
faHeart,
|
||||
faWandSparkles,
|
||||
faUmbrella,
|
||||
faMugHot,
|
||||
faBook,
|
||||
faDroplet,
|
||||
faBrush,
|
||||
faSnowflake,
|
||||
faShop,
|
||||
faShirt,
|
||||
faBagShopping,
|
||||
faGauge,
|
||||
faMountainSun,
|
||||
faPassport,
|
||||
faPhoneVolume,
|
||||
faNewspaper,
|
||||
faNetworkWired,
|
||||
faRocket,
|
||||
faStarOfLife,
|
||||
faSeedling,
|
||||
faTrain,
|
||||
faMicrochip,
|
||||
faRecordVinyl,
|
||||
faTrophy,
|
||||
faHammer,
|
||||
faRobot,
|
||||
faCrown,
|
||||
faCube,
|
||||
faRoad,
|
||||
faPuzzlePiece,
|
||||
faIndustry,
|
||||
faWorm,
|
||||
faVault,
|
||||
faUtensils,
|
||||
faUserGraduate,
|
||||
faUniversalAccess,
|
||||
faTractor,
|
||||
faTent,
|
||||
faSpa,
|
||||
faSocks,
|
||||
faScissors,
|
||||
faSailboat,
|
||||
faPizzaSlice,
|
||||
faPaw,
|
||||
faMap,
|
||||
faLaptopCode,
|
||||
faKitMedical,
|
||||
faFaceSurprise,
|
||||
faFaceSmileWink,
|
||||
faFaceSmileBeam,
|
||||
faFaceMeh,
|
||||
faFaceLaugh,
|
||||
faFaceGrinStars,
|
||||
faFaceDizzy,
|
||||
faDog,
|
||||
faCrow,
|
||||
faCompactDisc,
|
||||
faClapperboard,
|
||||
faFeather,
|
||||
faFish,
|
||||
faCat,
|
||||
faTree,
|
||||
faShield,
|
||||
faLaptop,
|
||||
faDisplay,
|
||||
faPrescription,
|
||||
faWheelchairMove,
|
||||
faGift,
|
||||
faMagnet,
|
||||
faPaintRoller,
|
||||
faGamepad,
|
||||
faCookieBite,
|
||||
faTowerCell,
|
||||
faTooth,
|
||||
faDollarSign,
|
||||
faSterlingSign,
|
||||
faYenSign,
|
||||
faPesoSign,
|
||||
faRainbow,
|
||||
faPenRuler,
|
||||
faSwatchbook,
|
||||
faStarAndCrescent,
|
||||
faSolarPanel,
|
||||
faUmbrellaBeach,
|
||||
faGem,
|
||||
faDna,
|
||||
].map((icon) => [
|
||||
icon.iconName,
|
||||
{
|
||||
component: ({ color, size = 24, className, style }: FAProps) => (
|
||||
<FontAwesomeWrapper size={size}>
|
||||
<FontAwesomeIcon
|
||||
style={{
|
||||
width: 0.6666666667 * size,
|
||||
height: 0.6666666667 * size,
|
||||
...style,
|
||||
}}
|
||||
color={color}
|
||||
icon={icon}
|
||||
className={className}
|
||||
/>
|
||||
</FontAwesomeWrapper>
|
||||
),
|
||||
},
|
||||
])
|
||||
),
|
||||
} as const;
|
||||
}
|
||||
|
||||
const FontAwesomeWrapper = styled.span<{ size: number }>`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: ${(props) => props.size}px;
|
||||
height: ${(props) => props.size}px;
|
||||
`;
|
||||
Reference in New Issue
Block a user