├── .npmignore ├── .gitignore ├── .storybook ├── preview.js └── main.js ├── src ├── outline-icons-hero.png ├── components │ ├── CommentIcon.tsx │ ├── InputIcon.tsx │ ├── UserIcon.tsx │ ├── CloudIcon.tsx │ ├── DisclosureIcon.tsx │ ├── TableIcon.tsx │ ├── ProfileIcon.tsx │ ├── TableHeaderColumnIcon.tsx │ ├── CaretUpIcon.tsx │ ├── TeamIcon.tsx │ ├── GoToIcon.tsx │ ├── TableHeaderRowIcon.tsx │ ├── CaretDownIcon.tsx │ ├── PlusIcon.tsx │ ├── BillingIcon.tsx │ ├── BookmarkedIcon.tsx │ ├── TableColumnsDistributeIcon.tsx │ ├── PrintIcon.tsx │ ├── InfoIcon.tsx │ ├── ZoomOutIcon.tsx │ ├── BoldIcon.tsx │ ├── WarningIcon.tsx │ ├── GraphIcon.tsx │ ├── MoreIcon.tsx │ ├── SidebarIcon.tsx │ ├── BackIcon.tsx │ ├── NextIcon.tsx │ ├── BookmarkIcon.tsx │ ├── ExpandedIcon.tsx │ ├── CheckmarkIcon.tsx │ ├── AlignLeftIcon.tsx │ ├── ArrowIcon.tsx │ ├── AlignCenterIcon.tsx │ ├── AlignRightIcon.tsx │ ├── HomeIcon.tsx │ ├── CoinsIcon.tsx │ ├── KeyboardIcon.tsx │ ├── FeedbackIcon.tsx │ ├── Icon.tsx │ ├── RamenIcon.tsx │ ├── LogoutIcon.tsx │ ├── TableOfContentsIcon.tsx │ ├── ItalicIcon.tsx │ ├── EmbedIcon.tsx │ ├── CollapsedIcon.tsx │ ├── DuplicateIcon.tsx │ ├── HorizontalRuleIcon.tsx │ ├── LightningIcon.tsx │ ├── ShapesIcon.tsx │ ├── ZoomInIcon.tsx │ ├── BrowserIcon.tsx │ ├── CameraIcon.tsx │ ├── ClockIcon.tsx │ ├── SearchIcon.tsx │ ├── GlobeIcon.tsx │ ├── StrikethroughIcon.tsx │ ├── LightBulbIcon.tsx │ ├── DocumentIcon.tsx │ ├── PadlockIcon.tsx │ ├── BuildingBlocksIcon.tsx │ ├── AlignImageLeftIcon.tsx │ ├── AlignImageRightIcon.tsx │ ├── BicycleIcon.tsx │ ├── DownloadIcon.tsx │ ├── BeakerIcon.tsx │ ├── CopyIcon.tsx │ ├── ImageIcon.tsx │ ├── PromoteIcon.tsx │ ├── LeafIcon.tsx │ ├── UnstarredIcon.tsx │ ├── CollapseIcon.tsx │ ├── TerminalIcon.tsx │ ├── OpenIcon.tsx │ ├── ToolsIcon.tsx │ ├── FlameIcon.tsx │ ├── GroupIcon.tsx │ ├── MoonIcon.tsx │ ├── QuestionMarkIcon.tsx │ ├── BlockQuoteIcon.tsx │ ├── ExportIcon.tsx │ ├── ImportIcon.tsx │ ├── NewDocumentIcon.tsx │ ├── AcademicCapIcon.tsx │ ├── CloseIcon.tsx │ ├── EmailIcon.tsx │ ├── CrossIcon.tsx │ ├── EditIcon.tsx │ ├── TruckIcon.tsx │ ├── RegexIcon.tsx │ ├── SmileyIcon.tsx │ ├── VehicleIcon.tsx │ ├── AlignImageCenterIcon.tsx │ ├── MoveIcon.tsx │ ├── Heading4Icon.tsx │ ├── Heading2Icon.tsx │ ├── IndentIcon.tsx │ ├── OutdentIcon.tsx │ ├── PageBreakIcon.tsx │ ├── PlaneIcon.tsx │ ├── MarkAsReadIcon.tsx │ ├── LibraryIcon.tsx │ ├── MenuIcon.tsx │ ├── CarrotIcon.tsx │ ├── CodeIcon.tsx │ ├── DatabaseIcon.tsx │ ├── Heading1Icon.tsx │ ├── SubscribeIcon.tsx │ ├── NotepadIcon.tsx │ ├── InsertRightIcon.tsx │ ├── HashtagIcon.tsx │ ├── InsertLeftIcon.tsx │ ├── ThumbsUpIcon.tsx │ ├── InsertBelowIcon.tsx │ ├── SportIcon.tsx │ ├── ThumbsDownIcon.tsx │ ├── InsertAboveIcon.tsx │ ├── ArchiveIcon.tsx │ ├── Heading3Icon.tsx │ ├── StarredIcon.tsx │ ├── ReplaceIcon.tsx │ ├── TableMergeCellsIcon.tsx │ ├── DraftsIcon.tsx │ ├── DisconnectedIcon.tsx │ ├── EyeIcon.tsx │ ├── BulletedListIcon.tsx │ ├── HighlightIcon.tsx │ ├── IceCreamIcon.tsx │ ├── TableSplitCellsIcon.tsx │ ├── PinIcon.tsx │ ├── AlignFullWidthIcon.tsx │ ├── PaletteIcon.tsx │ ├── ServerRackIcon.tsx │ ├── ReactionIcon.tsx │ ├── UnsubscribeIcon.tsx │ ├── CheckboxIcon.tsx │ ├── PublishIcon.tsx │ ├── AlphabeticalSortIcon.tsx │ ├── ManualSortIcon.tsx │ ├── ShuffleIcon.tsx │ ├── UnpublishIcon.tsx │ ├── CollectionIcon.tsx │ ├── TargetIcon.tsx │ ├── AlphabeticalReverseSortIcon.tsx │ ├── DoneIcon.tsx │ ├── CaseSensitiveIcon.tsx │ ├── SparklesIcon.tsx │ ├── SunIcon.tsx │ ├── LinkIcon.tsx │ ├── WebhooksIcon.tsx │ ├── HistoryIcon.tsx │ ├── MathIcon.tsx │ ├── TrashIcon.tsx │ ├── JournalIcon.tsx │ ├── BugIcon.tsx │ ├── SettingsIcon.tsx │ ├── PrivateCollectionIcon.tsx │ ├── TodoListIcon.tsx │ ├── RestoreIcon.tsx │ ├── DigitalIcon.tsx │ ├── CalendarIcon.tsx │ └── OrderedListIcon.tsx └── stories │ └── index.stories.tsx ├── .babelrc ├── .vscode └── settings.json ├── README.md ├── package.json └── LICENSE /.npmignore: -------------------------------------------------------------------------------- 1 | src -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | .DS_Store 4 | .log -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | 2 | export const parameters = { 3 | actions: { argTypesRegex: "^on[A-Z].*" }, 4 | } -------------------------------------------------------------------------------- /src/outline-icons-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/outline/outline-icons/HEAD/src/outline-icons-hero.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-react", 4 | "@babel/preset-typescript", 5 | "@babel/preset-env" 6 | ], 7 | "plugins": [] 8 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "javascript.validate.enable": false, 3 | "javascript.format.enable": false, 4 | "typescript.validate.enable": false, 5 | "typescript.format.enable": false, 6 | "editor.formatOnSave": true, 7 | } -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | export default { 2 | "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], 3 | addons: ['@storybook/addon-backgrounds'], 4 | framework: { 5 | name: "@storybook/react-webpack5", 6 | options: {} 7 | }, 8 | }; -------------------------------------------------------------------------------- /src/components/CommentIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CommentIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CommentIcon); 17 | -------------------------------------------------------------------------------- /src/components/InputIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function InputIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(InputIcon); 21 | -------------------------------------------------------------------------------- /src/components/UserIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function UserIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(UserIcon); 17 | -------------------------------------------------------------------------------- /src/components/CloudIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CloudIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CloudIcon); 17 | -------------------------------------------------------------------------------- /src/components/DisclosureIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DisclosureIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(DisclosureIcon); 17 | -------------------------------------------------------------------------------- /src/components/TableIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(TableIcon); 21 | -------------------------------------------------------------------------------- /src/components/ProfileIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ProfileIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(ProfileIcon); 17 | -------------------------------------------------------------------------------- /src/components/TableHeaderColumnIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableHeaderColumnIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(TableHeaderColumnIcon); 21 | -------------------------------------------------------------------------------- /src/components/CaretUpIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CaretUpIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CaretUpIcon); 17 | -------------------------------------------------------------------------------- /src/components/TeamIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TeamIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(TeamIcon); 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Outline Icons Hero](/src/outline-icons-hero.png) 2 | 3 | # Outline Icons 4 | 5 | An iconset designed for the Outline knowledge base by [Tim Van Damme](https://twitter.com/maxvoltar) and [Tom Moor](https://twitter.com/tommoor). 6 | 7 | ## Usage 8 | 9 | All icons are exported as React components from the root, simply look in the directory for available icons https://github.com/outline/outline-icons/tree/master/src/components and import like so: 10 | 11 | ```javascript 12 | import { UserIcon } from "outline-icons"; 13 | ``` 14 | 15 | ## Preview 16 | 17 | Storybook is included for previewing icons, just run `yarn start`. 18 | 19 | ## License 20 | 21 | Outline is [BSD licensed](https://github.com/outline/outline-icons/blob/master/LICENSE). 22 | -------------------------------------------------------------------------------- /src/components/GoToIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function GoToIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(GoToIcon); 17 | -------------------------------------------------------------------------------- /src/components/TableHeaderRowIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableHeaderRowIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(TableHeaderRowIcon); 21 | -------------------------------------------------------------------------------- /src/components/CaretDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CaretDownIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CaretDownIcon); 17 | -------------------------------------------------------------------------------- /src/components/PlusIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PlusIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(PlusIcon); 17 | -------------------------------------------------------------------------------- /src/components/BillingIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BillingIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(BillingIcon); 17 | -------------------------------------------------------------------------------- /src/components/BookmarkedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BookmarkedIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(BookmarkedIcon); 21 | -------------------------------------------------------------------------------- /src/components/TableColumnsDistributeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableColumnsDistributeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default React.forwardRef(TableColumnsDistributeIcon); 18 | -------------------------------------------------------------------------------- /src/components/PrintIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PrintIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(PrintIcon); 21 | -------------------------------------------------------------------------------- /src/components/InfoIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function InfoIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 15 | 16 | ); 17 | } 18 | 19 | export default React.forwardRef(InfoIcon); 20 | -------------------------------------------------------------------------------- /src/components/ZoomOutIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ZoomOutIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(ZoomOutIcon); 17 | -------------------------------------------------------------------------------- /src/components/BoldIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BoldIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(BoldIcon); 17 | -------------------------------------------------------------------------------- /src/components/WarningIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function WarningIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(WarningIcon); 21 | -------------------------------------------------------------------------------- /src/components/GraphIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function GraphIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(GraphIcon); 19 | -------------------------------------------------------------------------------- /src/components/MoreIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function MoreIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(MoreIcon); 17 | -------------------------------------------------------------------------------- /src/components/SidebarIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SidebarIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default React.forwardRef(SidebarIcon); 22 | -------------------------------------------------------------------------------- /src/components/BackIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BackIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(BackIcon); 17 | -------------------------------------------------------------------------------- /src/components/NextIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function NextIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(NextIcon); 17 | -------------------------------------------------------------------------------- /src/components/BookmarkIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BookmarkIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(BookmarkIcon); 21 | -------------------------------------------------------------------------------- /src/components/ExpandedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ExpandedIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(ExpandedIcon); 17 | -------------------------------------------------------------------------------- /src/components/CheckmarkIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CheckmarkIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CheckmarkIcon); 17 | -------------------------------------------------------------------------------- /src/components/AlignLeftIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignLeftIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(AlignLeftIcon); 17 | -------------------------------------------------------------------------------- /src/components/ArrowIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ArrowIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ArrowIcon); 21 | -------------------------------------------------------------------------------- /src/components/AlignCenterIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignCenterIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(AlignCenterIcon); 17 | -------------------------------------------------------------------------------- /src/components/AlignRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignRightIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(AlignRightIcon); 17 | -------------------------------------------------------------------------------- /src/components/HomeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function HomeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(HomeIcon); 21 | -------------------------------------------------------------------------------- /src/components/CoinsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CoinsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CoinsIcon); 17 | -------------------------------------------------------------------------------- /src/components/KeyboardIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function KeyboardIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(KeyboardIcon); 17 | -------------------------------------------------------------------------------- /src/components/FeedbackIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function FeedbackIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(FeedbackIcon); 21 | -------------------------------------------------------------------------------- /src/components/Icon.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export type Props = { 4 | className?: string; 5 | color?: string; 6 | size?: number; 7 | onClick?: (ev: React.MouseEvent) => void; 8 | theme?: Record; 9 | }; 10 | 11 | type BaseProps = { 12 | children?: React.ReactNode; 13 | }; 14 | 15 | function Icon( 16 | { children, theme, color = "currentColor", size, ...rest }: Props & BaseProps, 17 | ref: React.ForwardedRef 18 | ): React.ReactElement, any> { 19 | const s = size ? size + "px" : "24px"; 20 | 21 | return ( 22 | 31 | {children} 32 | 33 | ); 34 | } 35 | 36 | export default React.forwardRef(Icon); 37 | -------------------------------------------------------------------------------- /src/components/RamenIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function RamenIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(RamenIcon); 19 | -------------------------------------------------------------------------------- /src/components/LogoutIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function LogoutIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(LogoutIcon); 21 | -------------------------------------------------------------------------------- /src/components/TableOfContentsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableOfContentsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(TableOfContentsIcon); 17 | -------------------------------------------------------------------------------- /src/components/ItalicIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ItalicIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(ItalicIcon); 17 | -------------------------------------------------------------------------------- /src/components/EmbedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function EmbedIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(EmbedIcon); 21 | -------------------------------------------------------------------------------- /src/components/CollapsedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CollapsedIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CollapsedIcon); 17 | -------------------------------------------------------------------------------- /src/components/DuplicateIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DuplicateIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(DuplicateIcon); 21 | -------------------------------------------------------------------------------- /src/components/HorizontalRuleIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function HorizontalRuleIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(HorizontalRuleIcon); 17 | -------------------------------------------------------------------------------- /src/components/LightningIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function LightningIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(LightningIcon); 21 | -------------------------------------------------------------------------------- /src/components/ShapesIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ShapesIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(ShapesIcon); 19 | -------------------------------------------------------------------------------- /src/components/ZoomInIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ZoomInIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(ZoomInIcon); 17 | -------------------------------------------------------------------------------- /src/components/BrowserIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BrowserIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(BrowserIcon); 21 | -------------------------------------------------------------------------------- /src/components/CameraIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CameraIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(CameraIcon); 21 | -------------------------------------------------------------------------------- /src/components/ClockIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ClockIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ClockIcon); 21 | -------------------------------------------------------------------------------- /src/components/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SearchIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(SearchIcon); 17 | -------------------------------------------------------------------------------- /src/components/GlobeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function GlobeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(GlobeIcon); 21 | -------------------------------------------------------------------------------- /src/components/StrikethroughIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function StrikethroughIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default React.forwardRef(StrikethroughIcon); 18 | -------------------------------------------------------------------------------- /src/components/LightBulbIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function LightBulbIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(LightBulbIcon); 17 | -------------------------------------------------------------------------------- /src/components/DocumentIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DocumentIcon( 6 | { 7 | outline = false, 8 | ...rest 9 | }: Props & { 10 | outline?: boolean; 11 | }, 12 | ref: React.ForwardedRef 13 | ): React.ReactElement, any> { 14 | return ( 15 | 16 | {outline ? ( 17 | 18 | ) : ( 19 | 20 | )} 21 | 22 | ); 23 | } 24 | 25 | export default React.forwardRef(DocumentIcon); 26 | -------------------------------------------------------------------------------- /src/components/PadlockIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PadlockIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(PadlockIcon); 17 | -------------------------------------------------------------------------------- /src/components/BuildingBlocksIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BuildingBlocksIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(BuildingBlocksIcon); 19 | -------------------------------------------------------------------------------- /src/components/AlignImageLeftIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignImageLeftIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(AlignImageLeftIcon); 21 | -------------------------------------------------------------------------------- /src/components/AlignImageRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignImageRightIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(AlignImageRightIcon); 21 | -------------------------------------------------------------------------------- /src/components/BicycleIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BicycleIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(BicycleIcon); 21 | -------------------------------------------------------------------------------- /src/components/DownloadIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DownloadIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(DownloadIcon); 19 | -------------------------------------------------------------------------------- /src/components/BeakerIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BeakerIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(BeakerIcon); 17 | -------------------------------------------------------------------------------- /src/components/CopyIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CopyIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(CopyIcon); 21 | -------------------------------------------------------------------------------- /src/components/ImageIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ImageIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(ImageIcon); 17 | -------------------------------------------------------------------------------- /src/components/PromoteIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PromoteIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(PromoteIcon); 21 | -------------------------------------------------------------------------------- /src/components/LeafIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function LeafIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(LeafIcon); 17 | -------------------------------------------------------------------------------- /src/components/UnstarredIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function UnstarredIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(UnstarredIcon); 21 | -------------------------------------------------------------------------------- /src/components/CollapseIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CollapseIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default React.forwardRef(CollapseIcon); 18 | -------------------------------------------------------------------------------- /src/components/TerminalIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TerminalIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(TerminalIcon); 21 | -------------------------------------------------------------------------------- /src/components/OpenIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function OpenIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(OpenIcon); 17 | -------------------------------------------------------------------------------- /src/components/ToolsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ToolsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ToolsIcon); 21 | -------------------------------------------------------------------------------- /src/components/FlameIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function FlameIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(FlameIcon); 17 | -------------------------------------------------------------------------------- /src/components/GroupIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function GroupIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(GroupIcon); 17 | -------------------------------------------------------------------------------- /src/components/MoonIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function MoonIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(MoonIcon); 17 | -------------------------------------------------------------------------------- /src/components/QuestionMarkIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function QuestionMarkIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(QuestionMarkIcon); 17 | -------------------------------------------------------------------------------- /src/components/BlockQuoteIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BlockQuoteIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(BlockQuoteIcon); 17 | -------------------------------------------------------------------------------- /src/components/ExportIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ExportIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ExportIcon); 21 | -------------------------------------------------------------------------------- /src/components/ImportIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ImportIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ImportIcon); 21 | -------------------------------------------------------------------------------- /src/components/NewDocumentIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function NewDocumentIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(NewDocumentIcon); 17 | -------------------------------------------------------------------------------- /src/components/AcademicCapIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AcademicCapIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(AcademicCapIcon); 17 | -------------------------------------------------------------------------------- /src/components/CloseIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CloseIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CloseIcon); 17 | -------------------------------------------------------------------------------- /src/components/EmailIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function EmailIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(EmailIcon); 17 | -------------------------------------------------------------------------------- /src/components/CrossIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CrossIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(CrossIcon); 21 | -------------------------------------------------------------------------------- /src/components/EditIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function EditIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(EditIcon); 17 | -------------------------------------------------------------------------------- /src/components/TruckIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TruckIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(TruckIcon); 21 | -------------------------------------------------------------------------------- /src/components/RegexIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function RegexIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(RegexIcon); 21 | -------------------------------------------------------------------------------- /src/components/SmileyIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SmileyIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(SmileyIcon); 21 | -------------------------------------------------------------------------------- /src/components/VehicleIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function VehicleIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(VehicleIcon); 21 | -------------------------------------------------------------------------------- /src/components/AlignImageCenterIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignImageCenterIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(AlignImageCenterIcon); 21 | -------------------------------------------------------------------------------- /src/components/MoveIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function MoveIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(MoveIcon); 21 | -------------------------------------------------------------------------------- /src/components/Heading4Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function Heading4Icon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default React.forwardRef(Heading4Icon); 18 | -------------------------------------------------------------------------------- /src/components/Heading2Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function Heading2Icon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(Heading2Icon); 17 | -------------------------------------------------------------------------------- /src/components/IndentIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function IndentIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default React.forwardRef(IndentIcon); 22 | -------------------------------------------------------------------------------- /src/components/OutdentIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function OutdentIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default React.forwardRef(OutdentIcon); 22 | -------------------------------------------------------------------------------- /src/components/PageBreakIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PageBreakIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(PageBreakIcon); 21 | -------------------------------------------------------------------------------- /src/components/PlaneIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PlaneIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(PlaneIcon); 17 | -------------------------------------------------------------------------------- /src/components/MarkAsReadIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function MarkAsReadIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 21 | 22 | ); 23 | } 24 | 25 | export default React.forwardRef(MarkAsReadIcon); 26 | -------------------------------------------------------------------------------- /src/components/LibraryIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function LibraryIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 21 | 26 | 27 | ); 28 | } 29 | 30 | export default React.forwardRef(LibraryIcon); 31 | -------------------------------------------------------------------------------- /src/components/MenuIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function MenuIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(MenuIcon); 17 | -------------------------------------------------------------------------------- /src/components/CarrotIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CarrotIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CarrotIcon); 17 | -------------------------------------------------------------------------------- /src/components/CodeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CodeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(CodeIcon); 17 | -------------------------------------------------------------------------------- /src/components/DatabaseIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DatabaseIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(DatabaseIcon); 21 | -------------------------------------------------------------------------------- /src/components/Heading1Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function Heading1Icon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(Heading1Icon); 17 | -------------------------------------------------------------------------------- /src/components/SubscribeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SubscribeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(SubscribeIcon); 21 | -------------------------------------------------------------------------------- /src/components/NotepadIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function NotepadIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(NotepadIcon); 17 | -------------------------------------------------------------------------------- /src/components/InsertRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function InsertRightIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(InsertRightIcon); 17 | -------------------------------------------------------------------------------- /src/components/HashtagIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function HashtagIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(HashtagIcon); 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "outline-icons", 3 | "version": "3.14.0", 4 | "description": "An iconset designed for the Outline editor and knowledge base", 5 | "main": "lib/index.js", 6 | "license": "BSD-3-Clause", 7 | "funding": "https://github.com/sponsors/outline", 8 | "scripts": { 9 | "build": "yarn tsc", 10 | "prepublish": "yarn build", 11 | "start": "storybook dev -p 6006", 12 | "build-storybook": "storybook build" 13 | }, 14 | "browserslist": "> 0.25%, not dead", 15 | "devDependencies": { 16 | "@babel/core": "^7.22.1", 17 | "@babel/preset-env": "^7.22.4", 18 | "@babel/preset-react": "^7.22.3", 19 | "@babel/preset-typescript": "^7.21.5", 20 | "@storybook/addon-backgrounds": "^7.0.18", 21 | "@storybook/react": "^7.0.18", 22 | "@storybook/react-webpack5": "^7.0.18", 23 | "@types/react": "^18.2.8", 24 | "@types/react-dom": "^18.2.4", 25 | "babel-loader": "^9.1.2", 26 | "react": "^18.2.0", 27 | "react-dom": "^18.2.0", 28 | "storybook": "^7.0.18", 29 | "typescript": "^5.1.3", 30 | "webpack": "^5.85.0" 31 | }, 32 | "peerDependencies": { 33 | "react": "^17.0.0 || ^18.0.0" 34 | }, 35 | "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" 36 | } 37 | -------------------------------------------------------------------------------- /src/components/InsertLeftIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function InsertLeftIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(InsertLeftIcon); 17 | -------------------------------------------------------------------------------- /src/components/ThumbsUpIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ThumbsUpIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default React.forwardRef(ThumbsUpIcon); 18 | -------------------------------------------------------------------------------- /src/components/InsertBelowIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function InsertBelowIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(InsertBelowIcon); 17 | -------------------------------------------------------------------------------- /src/components/SportIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SportIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(SportIcon); 21 | -------------------------------------------------------------------------------- /src/components/ThumbsDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ThumbsDownIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default React.forwardRef(ThumbsDownIcon); 18 | -------------------------------------------------------------------------------- /src/components/InsertAboveIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function InsertAboveIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(InsertAboveIcon); 17 | -------------------------------------------------------------------------------- /src/components/ArchiveIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ArchiveIcon( 6 | { 7 | open, 8 | ...rest 9 | }: Props & { 10 | open?: boolean; 11 | }, 12 | ref: React.ForwardedRef 13 | ): React.ReactElement, any> { 14 | return ( 15 | 16 | {open ? ( 17 | 18 | ) : ( 19 | 20 | )} 21 | 22 | ); 23 | } 24 | 25 | export default React.forwardRef(ArchiveIcon); 26 | -------------------------------------------------------------------------------- /src/components/Heading3Icon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function Heading3Icon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(Heading3Icon); 17 | -------------------------------------------------------------------------------- /src/components/StarredIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function StarredIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(StarredIcon); 17 | -------------------------------------------------------------------------------- /src/components/ReplaceIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ReplaceIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ReplaceIcon); 21 | -------------------------------------------------------------------------------- /src/components/TableMergeCellsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableMergeCellsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(TableMergeCellsIcon); 19 | -------------------------------------------------------------------------------- /src/components/DraftsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DraftsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 21 | 22 | ); 23 | } 24 | 25 | export default React.forwardRef(DraftsIcon); 26 | -------------------------------------------------------------------------------- /src/components/DisconnectedIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DisconnectedIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(DisconnectedIcon); 21 | -------------------------------------------------------------------------------- /src/components/EyeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function EyeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(EyeIcon); 17 | -------------------------------------------------------------------------------- /src/components/BulletedListIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BulletedListIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(BulletedListIcon); 17 | -------------------------------------------------------------------------------- /src/components/HighlightIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function HighlightIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(HighlightIcon); 17 | -------------------------------------------------------------------------------- /src/components/IceCreamIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function IceCreamIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(IceCreamIcon); 21 | -------------------------------------------------------------------------------- /src/components/TableSplitCellsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TableSplitCellsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | ); 17 | } 18 | 19 | export default React.forwardRef(TableSplitCellsIcon); 20 | -------------------------------------------------------------------------------- /src/components/PinIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PinIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(PinIcon); 17 | -------------------------------------------------------------------------------- /src/components/AlignFullWidthIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlignFullWidthIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(AlignFullWidthIcon); 21 | -------------------------------------------------------------------------------- /src/components/PaletteIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PaletteIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(PaletteIcon); 17 | -------------------------------------------------------------------------------- /src/components/ServerRackIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ServerRackIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ServerRackIcon); 21 | -------------------------------------------------------------------------------- /src/components/ReactionIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ReactionIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ReactionIcon); 21 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2020 Outline (https://www.getoutline.com/) and individual contributors. 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 5 | 6 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 7 | 8 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the 9 | documentation and/or other materials provided with the distribution. 10 | 11 | 3. Neither the name of the Outline nor the names of its contributors may be used to endorse or promote products derived from this software 12 | without specific prior written permission. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, 15 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR 16 | CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 17 | PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 18 | WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF 19 | ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 20 | -------------------------------------------------------------------------------- /src/components/UnsubscribeIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function UnsubscribeIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(UnsubscribeIcon); 21 | -------------------------------------------------------------------------------- /src/components/CheckboxIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CheckboxIcon( 6 | { 7 | checked, 8 | ...rest 9 | }: Props & { 10 | checked: boolean; 11 | }, 12 | ref: React.ForwardedRef 13 | ): React.ReactElement, any> { 14 | return ( 15 | 16 | {checked ? ( 17 | 18 | ) : ( 19 | 24 | )} 25 | 26 | ); 27 | } 28 | 29 | export default React.forwardRef(CheckboxIcon); 30 | -------------------------------------------------------------------------------- /src/components/PublishIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function PublishIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(PublishIcon); 21 | -------------------------------------------------------------------------------- /src/components/AlphabeticalSortIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlphabeticalSortIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(AlphabeticalSortIcon); 21 | -------------------------------------------------------------------------------- /src/components/ManualSortIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ManualSortIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ManualSortIcon); 21 | -------------------------------------------------------------------------------- /src/components/ShuffleIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function ShuffleIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(ShuffleIcon); 21 | -------------------------------------------------------------------------------- /src/components/UnpublishIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function UnpublishIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(UnpublishIcon); 21 | -------------------------------------------------------------------------------- /src/components/CollectionIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props as IconProps } from "./Icon"; 4 | 5 | type Props = IconProps & { 6 | expanded?: boolean; 7 | }; 8 | 9 | function CollectionIcon( 10 | { expanded, ...rest }: Props, 11 | ref: React.ForwardedRef 12 | ): React.ReactElement, any> { 13 | return ( 14 | 15 | {expanded ? ( 16 | 17 | ) : ( 18 | 19 | )} 20 | 21 | ); 22 | } 23 | 24 | export default React.forwardRef(CollectionIcon); 25 | -------------------------------------------------------------------------------- /src/components/TargetIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TargetIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(TargetIcon); 21 | -------------------------------------------------------------------------------- /src/components/AlphabeticalReverseSortIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function AlphabeticalReverseSortIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(AlphabeticalReverseSortIcon); 17 | -------------------------------------------------------------------------------- /src/components/DoneIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DoneIcon( 6 | { 7 | outline = false, 8 | ...props 9 | }: Props & { 10 | outline?: boolean 11 | }, 12 | ref: React.ForwardedRef 13 | ): React.ReactElement, any> { 14 | return ( 15 | 16 | {outline ? ( 17 | <> 18 | 23 | 28 | 29 | ) : ( 30 | 35 | )} 36 | 37 | ); 38 | } 39 | 40 | export default React.forwardRef(DoneIcon); 41 | -------------------------------------------------------------------------------- /src/components/CaseSensitiveIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CaseSensitiveIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default React.forwardRef(CaseSensitiveIcon); 22 | -------------------------------------------------------------------------------- /src/components/SparklesIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SparklesIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | 14 | 15 | ); 16 | } 17 | 18 | export default React.forwardRef(SparklesIcon); 19 | -------------------------------------------------------------------------------- /src/components/SunIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SunIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(SunIcon); 21 | -------------------------------------------------------------------------------- /src/components/LinkIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function LinkIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(LinkIcon); 17 | -------------------------------------------------------------------------------- /src/components/WebhooksIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function WebhooksIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(WebhooksIcon); 17 | -------------------------------------------------------------------------------- /src/components/HistoryIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function HistoryIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(HistoryIcon); 21 | -------------------------------------------------------------------------------- /src/components/MathIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function MathIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(MathIcon); 21 | -------------------------------------------------------------------------------- /src/components/TrashIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props as IconProps } from "./Icon"; 4 | 5 | type Props = IconProps & { 6 | open?: boolean; 7 | }; 8 | 9 | function TrashIcon( 10 | { open, ...rest }: Props, 11 | ref: React.ForwardedRef 12 | ): React.ReactElement, any> { 13 | return ( 14 | 15 | {open ? ( 16 | <> 17 | 18 | 19 | 20 | ) : ( 21 | 22 | )} 23 | 24 | ); 25 | } 26 | 27 | export default React.forwardRef(TrashIcon); 28 | -------------------------------------------------------------------------------- /src/components/JournalIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function JournalIcon( 6 | { 7 | expanded, 8 | ...rest 9 | }: Props & { 10 | expanded?: boolean; 11 | }, 12 | ref: React.ForwardedRef 13 | ): React.ReactElement, any> { 14 | return ( 15 | 16 | {expanded ? ( 17 | 18 | ) : ( 19 | 20 | )} 21 | 22 | ); 23 | } 24 | 25 | export default React.forwardRef(JournalIcon); 26 | -------------------------------------------------------------------------------- /src/components/BugIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function BugIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(BugIcon); 21 | -------------------------------------------------------------------------------- /src/components/SettingsIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function SettingsIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(SettingsIcon); 17 | -------------------------------------------------------------------------------- /src/components/PrivateCollectionIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props as IconProps } from "./Icon"; 4 | 5 | export type Props = IconProps & { 6 | expanded?: boolean; 7 | }; 8 | 9 | function PrivateCollectionIcon( 10 | { expanded, ...rest }: Props, 11 | ref: React.ForwardedRef 12 | ): React.ReactElement, any> { 13 | return ( 14 | 15 | {expanded ? ( 16 | 17 | ) : ( 18 | 19 | )} 20 | 21 | ); 22 | } 23 | 24 | export default React.forwardRef(PrivateCollectionIcon); 25 | -------------------------------------------------------------------------------- /src/components/TodoListIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function TodoListIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(TodoListIcon); 17 | -------------------------------------------------------------------------------- /src/components/RestoreIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function RestoreIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(RestoreIcon); 21 | -------------------------------------------------------------------------------- /src/components/DigitalIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function DigitalIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(DigitalIcon); 21 | -------------------------------------------------------------------------------- /src/stories/index.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import * as Icons from "../index"; 3 | 4 | // Define an index signature for Icons 5 | type IconType = { [key: string]: React.ComponentType }; 6 | const TypedIcons = Icons as IconType; 7 | 8 | const names = Object.keys(TypedIcons); 9 | 10 | export default { 11 | title: "Icons", 12 | }; 13 | 14 | export const Dark = () => ( 15 | <> 16 |
17 | {names.map((name) => { 18 | if (name === "default" || name === "Icon") return null; 19 | const Component = TypedIcons[name]; 20 | return ( 21 |
22 | 23 |
31 | {name} 32 |
33 |
34 | ); 35 | })} 36 |
37 | 38 | ); 39 | 40 | export const Light = () => ( 41 | <> 42 |
43 | {names.map((name) => { 44 | if (name === "default" || name === "Icon") return null; 45 | const Component = TypedIcons[name]; 46 | return ( 47 |
48 | 49 |
57 | {name} 58 |
59 |
60 | ); 61 | })} 62 |
63 | 64 | ); 65 | 66 | Light.parameters = { 67 | backgrounds: { default: "dark" }, 68 | }; 69 | 70 | export const CollectionExpanded = { 71 | render: () => , 72 | parameters: { 73 | docs: { 74 | storyDescription: "CollectionIcon expanded", 75 | }, 76 | }, 77 | }; 78 | 79 | export const DocumentOutline = { 80 | render: () => , 81 | parameters: { 82 | docs: { 83 | storyDescription: "DocumentIcon outline", 84 | }, 85 | }, 86 | }; 87 | 88 | export const DoneOutline = { 89 | render: () => , 90 | parameters: { 91 | docs: { 92 | storyDescription: "DoneIcon outline", 93 | }, 94 | }, 95 | }; 96 | 97 | 98 | export const ArchiveOpen = { 99 | render: () => , 100 | parameters: { 101 | docs: { 102 | storyDescription: "ArchiveIcon open", 103 | }, 104 | }, 105 | }; 106 | 107 | export const TrashOpen = { 108 | render: () => , 109 | parameters: { 110 | docs: { 111 | storyDescription: "TrashIcon open", 112 | }, 113 | }, 114 | }; 115 | -------------------------------------------------------------------------------- /src/components/CalendarIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function CalendarIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 16 | 17 | ); 18 | } 19 | 20 | export default React.forwardRef(CalendarIcon); 21 | -------------------------------------------------------------------------------- /src/components/OrderedListIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Icon from "./Icon"; 3 | import { Props } from "./Icon"; 4 | 5 | function OrderedListIcon( 6 | props: Props, 7 | ref: React.ForwardedRef 8 | ): React.ReactElement, any> { 9 | return ( 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default React.forwardRef(OrderedListIcon); 17 | --------------------------------------------------------------------------------