@primer/octicons-react
Advanced tools
Comparing version 0.0.0-27f6545 to 0.0.0-286842d
1119
dist/icons.d.ts
/* THIS FILE IS GENERATED. DO NOT EDIT IT. */ | ||
import * as React from 'react' | ||
type Icon< | ||
W extends number = number, | ||
H extends number = number | ||
> = React.SFC<{}> & { size: [W, H] }; | ||
type Size = 'small' | 'medium' | 'large' | ||
declare const Alert: Icon<16, 16> | ||
declare const Archive: Icon<14, 16> | ||
declare const ArrowBoth: Icon<20, 16> | ||
declare const ArrowDown: Icon<10, 16> | ||
declare const ArrowLeft: Icon<10, 16> | ||
declare const ArrowRight: Icon<10, 16> | ||
declare const ArrowSmallDown: Icon<6, 16> | ||
declare const ArrowSmallLeft: Icon<6, 16> | ||
declare const ArrowSmallRight: Icon<6, 16> | ||
declare const ArrowSmallUp: Icon<6, 16> | ||
declare const ArrowUp: Icon<10, 16> | ||
declare const Beaker: Icon<16, 16> | ||
declare const Bell: Icon<15, 16> | ||
declare const Bold: Icon<10, 16> | ||
declare const Book: Icon<16, 16> | ||
declare const Bookmark: Icon<10, 16> | ||
declare const Briefcase: Icon<14, 16> | ||
declare const Broadcast: Icon<16, 16> | ||
declare const Browser: Icon<14, 16> | ||
declare const Bug: Icon<16, 16> | ||
declare const Calendar: Icon<14, 16> | ||
declare const Check: Icon<12, 16> | ||
declare const Checklist: Icon<16, 16> | ||
declare const ChevronDown: Icon<10, 16> | ||
declare const ChevronLeft: Icon<8, 16> | ||
declare const ChevronRight: Icon<8, 16> | ||
declare const ChevronUp: Icon<10, 16> | ||
declare const CircleSlash: Icon<14, 16> | ||
declare const CircuitBoard: Icon<14, 16> | ||
declare const Clippy: Icon<14, 16> | ||
declare const Clock: Icon<14, 16> | ||
declare const CloudDownload: Icon<16, 16> | ||
declare const CloudUpload: Icon<16, 16> | ||
declare const Code: Icon<14, 16> | ||
declare const Comment: Icon<16, 16> | ||
declare const CommentDiscussion: Icon<16, 16> | ||
declare const CreditCard: Icon<16, 16> | ||
declare const Dash: Icon<8, 16> | ||
declare const Dashboard: Icon<16, 16> | ||
declare const Database: Icon<12, 16> | ||
declare const Dependent: Icon<16, 16> | ||
declare const DesktopDownload: Icon<16, 16> | ||
declare const DeviceCamera: Icon<16, 16> | ||
declare const DeviceCameraVideo: Icon<16, 16> | ||
declare const DeviceDesktop: Icon<16, 16> | ||
declare const DeviceMobile: Icon<10, 16> | ||
declare const Diff: Icon<13, 16> | ||
declare const DiffAdded: Icon<14, 16> | ||
declare const DiffIgnored: Icon<14, 16> | ||
declare const DiffModified: Icon<14, 16> | ||
declare const DiffRemoved: Icon<14, 16> | ||
declare const DiffRenamed: Icon<14, 16> | ||
declare const Ellipsis: Icon<12, 16> | ||
declare const Eye: Icon<16, 16> | ||
declare const EyeClosed: Icon<16, 14> | ||
declare const File: Icon<12, 16> | ||
declare const FileBinary: Icon<12, 16> | ||
declare const FileCode: Icon<12, 16> | ||
declare const FileDirectory: Icon<14, 16> | ||
declare const FileMedia: Icon<12, 16> | ||
declare const FilePdf: Icon<12, 16> | ||
declare const FileSubmodule: Icon<14, 16> | ||
declare const FileSymlinkDirectory: Icon<14, 16> | ||
declare const FileSymlinkFile: Icon<12, 16> | ||
declare const FileZip: Icon<12, 16> | ||
declare const Flame: Icon<12, 16> | ||
declare const Fold: Icon<14, 16> | ||
declare const FoldDown: Icon<14, 16> | ||
declare const FoldUp: Icon<14, 16> | ||
declare const Gear: Icon<14, 16> | ||
declare const Gift: Icon<14, 16> | ||
declare const Gist: Icon<12, 16> | ||
declare const GistSecret: Icon<14, 16> | ||
declare const GitBranch: Icon<10, 16> | ||
declare const GitCommit: Icon<14, 16> | ||
declare const GitCompare: Icon<14, 16> | ||
declare const GitMerge: Icon<12, 16> | ||
declare const GitPullRequest: Icon<12, 16> | ||
declare const GithubAction: Icon<16, 16> | ||
declare const Globe: Icon<14, 16> | ||
declare const Grabber: Icon<8, 16> | ||
declare const Graph: Icon<16, 16> | ||
declare const Heart: Icon<12, 16> | ||
declare const HeartOutline: Icon<12, 16> | ||
declare const History: Icon<14, 16> | ||
declare const Home: Icon<16, 16> | ||
declare const HorizontalRule: Icon<10, 16> | ||
declare const Hubot: Icon<14, 16> | ||
declare const Inbox: Icon<14, 16> | ||
declare const Infinity: Icon<16, 16> | ||
declare const Info: Icon<14, 16> | ||
declare const IssueClosed: Icon<16, 16> | ||
declare const IssueOpened: Icon<14, 16> | ||
declare const IssueReopened: Icon<14, 16> | ||
declare const Italic: Icon<6, 16> | ||
declare const Jersey: Icon<14, 16> | ||
declare const KebabHorizontal: Icon<13, 16> | ||
declare const KebabVertical: Icon<3, 16> | ||
declare const Key: Icon<14, 16> | ||
declare const Keyboard: Icon<16, 16> | ||
declare const Law: Icon<14, 16> | ||
declare const LightBulb: Icon<12, 16> | ||
declare const LineArrowDown: Icon<16, 16> | ||
declare const LineArrowLeft: Icon<16, 16> | ||
declare const LineArrowRight: Icon<16, 16> | ||
declare const LineArrowUp: Icon<16, 16> | ||
declare const Link: Icon<16, 16> | ||
declare const LinkExternal: Icon<12, 16> | ||
declare const ListOrdered: Icon<13, 16> | ||
declare const ListUnordered: Icon<12, 16> | ||
declare const Location: Icon<12, 16> | ||
declare const Lock: Icon<12, 16> | ||
declare const LogoGist: Icon<25, 16> | ||
declare const LogoGithub: Icon<45, 16> | ||
declare const Mail: Icon<14, 16> | ||
declare const MailRead: Icon<14, 16> | ||
declare const MarkGithub: Icon<16, 16> | ||
declare const Markdown: Icon<16, 16> | ||
declare const Megaphone: Icon<16, 16> | ||
declare const Mention: Icon<14, 16> | ||
declare const Milestone: Icon<14, 16> | ||
declare const Mirror: Icon<16, 16> | ||
declare const MortarBoard: Icon<16, 16> | ||
declare const Mute: Icon<16, 16> | ||
declare const NoNewline: Icon<16, 16> | ||
declare const Note: Icon<14, 16> | ||
declare const Octoface: Icon<16, 16> | ||
declare const Organization: Icon<16, 16> | ||
declare const Package: Icon<16, 16> | ||
declare const Paintcan: Icon<12, 16> | ||
declare const Pencil: Icon<14, 16> | ||
declare const Person: Icon<12, 16> | ||
declare const Pin: Icon<16, 16> | ||
declare const Play: Icon<14, 16> | ||
declare const Plug: Icon<14, 16> | ||
declare const Plus: Icon<12, 16> | ||
declare const PlusSmall: Icon<7, 16> | ||
declare const PrimitiveDot: Icon<8, 16> | ||
declare const PrimitiveDotStroke: Icon<8, 16> | ||
declare const PrimitiveSquare: Icon<8, 16> | ||
declare const Project: Icon<15, 16> | ||
declare const Pulse: Icon<14, 16> | ||
declare const Question: Icon<14, 16> | ||
declare const Quote: Icon<14, 16> | ||
declare const RadioTower: Icon<16, 16> | ||
declare const Reply: Icon<14, 16> | ||
declare const Repo: Icon<12, 16> | ||
declare const RepoClone: Icon<16, 16> | ||
declare const RepoForcePush: Icon<12, 16> | ||
declare const RepoForked: Icon<10, 16> | ||
declare const RepoPull: Icon<16, 16> | ||
declare const RepoPush: Icon<12, 16> | ||
declare const RepoTemplate: Icon<14, 16> | ||
declare const RepoTemplatePrivate: Icon<14, 16> | ||
declare const Report: Icon<16, 16> | ||
declare const RequestChanges: Icon<16, 16> | ||
declare const Rocket: Icon<16, 16> | ||
declare const Rss: Icon<10, 16> | ||
declare const Ruby: Icon<16, 16> | ||
declare const Saved: Icon<16, 16> | ||
declare const ScreenFull: Icon<14, 16> | ||
declare const ScreenNormal: Icon<14, 16> | ||
declare const Search: Icon<16, 16> | ||
declare const Server: Icon<12, 16> | ||
declare const Settings: Icon<16, 16> | ||
declare const Shield: Icon<14, 16> | ||
declare const ShieldCheck: Icon<16, 16> | ||
declare const ShieldLock: Icon<14, 16> | ||
declare const ShieldX: Icon<16, 16> | ||
declare const SignIn: Icon<14, 16> | ||
declare const SignOut: Icon<16, 17> | ||
declare const Skip: Icon<16, 16> | ||
declare const Smiley: Icon<16, 16> | ||
declare const Squirrel: Icon<16, 16> | ||
declare const Star: Icon<14, 16> | ||
declare const Stop: Icon<14, 16> | ||
declare const Sync: Icon<12, 16> | ||
declare const Tag: Icon<15, 16> | ||
declare const Tasklist: Icon<16, 16> | ||
declare const Telescope: Icon<14, 16> | ||
declare const Terminal: Icon<14, 16> | ||
declare const TextSize: Icon<18, 16> | ||
declare const ThreeBars: Icon<12, 16> | ||
declare const Thumbsdown: Icon<16, 16> | ||
declare const Thumbsup: Icon<16, 16> | ||
declare const Tools: Icon<16, 16> | ||
declare const Trashcan: Icon<12, 16> | ||
declare const TriangleDown: Icon<12, 16> | ||
declare const TriangleLeft: Icon<6, 16> | ||
declare const TriangleRight: Icon<6, 16> | ||
declare const TriangleUp: Icon<12, 16> | ||
declare const Unfold: Icon<14, 16> | ||
declare const Unmute: Icon<16, 16> | ||
declare const Unsaved: Icon<16, 16> | ||
declare const Unverified: Icon<16, 16> | ||
declare const Verified: Icon<16, 16> | ||
declare const Versions: Icon<14, 16> | ||
declare const Watch: Icon<12, 16> | ||
declare const Workflow: Icon<16, 16> | ||
declare const WorkflowAll: Icon<16, 16> | ||
declare const X: Icon<12, 16> | ||
declare const Zap: Icon<10, 16> | ||
type iconsByName = { | ||
'alert': Icon<16, 16>, | ||
'archive': Icon<14, 16>, | ||
'arrow-both': Icon<20, 16>, | ||
'arrow-down': Icon<10, 16>, | ||
'arrow-left': Icon<10, 16>, | ||
'arrow-right': Icon<10, 16>, | ||
'arrow-small-down': Icon<6, 16>, | ||
'arrow-small-left': Icon<6, 16>, | ||
'arrow-small-right': Icon<6, 16>, | ||
'arrow-small-up': Icon<6, 16>, | ||
'arrow-up': Icon<10, 16>, | ||
'beaker': Icon<16, 16>, | ||
'bell': Icon<15, 16>, | ||
'bold': Icon<10, 16>, | ||
'book': Icon<16, 16>, | ||
'bookmark': Icon<10, 16>, | ||
'briefcase': Icon<14, 16>, | ||
'broadcast': Icon<16, 16>, | ||
'browser': Icon<14, 16>, | ||
'bug': Icon<16, 16>, | ||
'calendar': Icon<14, 16>, | ||
'check': Icon<12, 16>, | ||
'checklist': Icon<16, 16>, | ||
'chevron-down': Icon<10, 16>, | ||
'chevron-left': Icon<8, 16>, | ||
'chevron-right': Icon<8, 16>, | ||
'chevron-up': Icon<10, 16>, | ||
'circle-slash': Icon<14, 16>, | ||
'circuit-board': Icon<14, 16>, | ||
'clippy': Icon<14, 16>, | ||
'clock': Icon<14, 16>, | ||
'cloud-download': Icon<16, 16>, | ||
'cloud-upload': Icon<16, 16>, | ||
'code': Icon<14, 16>, | ||
'comment': Icon<16, 16>, | ||
'comment-discussion': Icon<16, 16>, | ||
'credit-card': Icon<16, 16>, | ||
'dash': Icon<8, 16>, | ||
'dashboard': Icon<16, 16>, | ||
'database': Icon<12, 16>, | ||
'dependent': Icon<16, 16>, | ||
'desktop-download': Icon<16, 16>, | ||
'device-camera': Icon<16, 16>, | ||
'device-camera-video': Icon<16, 16>, | ||
'device-desktop': Icon<16, 16>, | ||
'device-mobile': Icon<10, 16>, | ||
'diff': Icon<13, 16>, | ||
'diff-added': Icon<14, 16>, | ||
'diff-ignored': Icon<14, 16>, | ||
'diff-modified': Icon<14, 16>, | ||
'diff-removed': Icon<14, 16>, | ||
'diff-renamed': Icon<14, 16>, | ||
'ellipsis': Icon<12, 16>, | ||
'eye': Icon<16, 16>, | ||
'eye-closed': Icon<16, 14>, | ||
'file': Icon<12, 16>, | ||
'file-binary': Icon<12, 16>, | ||
'file-code': Icon<12, 16>, | ||
'file-directory': Icon<14, 16>, | ||
'file-media': Icon<12, 16>, | ||
'file-pdf': Icon<12, 16>, | ||
'file-submodule': Icon<14, 16>, | ||
'file-symlink-directory': Icon<14, 16>, | ||
'file-symlink-file': Icon<12, 16>, | ||
'file-zip': Icon<12, 16>, | ||
'flame': Icon<12, 16>, | ||
'fold': Icon<14, 16>, | ||
'fold-down': Icon<14, 16>, | ||
'fold-up': Icon<14, 16>, | ||
'gear': Icon<14, 16>, | ||
'gift': Icon<14, 16>, | ||
'gist': Icon<12, 16>, | ||
'gist-secret': Icon<14, 16>, | ||
'git-branch': Icon<10, 16>, | ||
'git-commit': Icon<14, 16>, | ||
'git-compare': Icon<14, 16>, | ||
'git-merge': Icon<12, 16>, | ||
'git-pull-request': Icon<12, 16>, | ||
'github-action': Icon<16, 16>, | ||
'globe': Icon<14, 16>, | ||
'grabber': Icon<8, 16>, | ||
'graph': Icon<16, 16>, | ||
'heart': Icon<12, 16>, | ||
'heart-outline': Icon<12, 16>, | ||
'history': Icon<14, 16>, | ||
'home': Icon<16, 16>, | ||
'horizontal-rule': Icon<10, 16>, | ||
'hubot': Icon<14, 16>, | ||
'inbox': Icon<14, 16>, | ||
'infinity': Icon<16, 16>, | ||
'info': Icon<14, 16>, | ||
'issue-closed': Icon<16, 16>, | ||
'issue-opened': Icon<14, 16>, | ||
'issue-reopened': Icon<14, 16>, | ||
'italic': Icon<6, 16>, | ||
'jersey': Icon<14, 16>, | ||
'kebab-horizontal': Icon<13, 16>, | ||
'kebab-vertical': Icon<3, 16>, | ||
'key': Icon<14, 16>, | ||
'keyboard': Icon<16, 16>, | ||
'law': Icon<14, 16>, | ||
'light-bulb': Icon<12, 16>, | ||
'line-arrow-down': Icon<16, 16>, | ||
'line-arrow-left': Icon<16, 16>, | ||
'line-arrow-right': Icon<16, 16>, | ||
'line-arrow-up': Icon<16, 16>, | ||
'link': Icon<16, 16>, | ||
'link-external': Icon<12, 16>, | ||
'list-ordered': Icon<13, 16>, | ||
'list-unordered': Icon<12, 16>, | ||
'location': Icon<12, 16>, | ||
'lock': Icon<12, 16>, | ||
'logo-gist': Icon<25, 16>, | ||
'logo-github': Icon<45, 16>, | ||
'mail': Icon<14, 16>, | ||
'mail-read': Icon<14, 16>, | ||
'mark-github': Icon<16, 16>, | ||
'markdown': Icon<16, 16>, | ||
'megaphone': Icon<16, 16>, | ||
'mention': Icon<14, 16>, | ||
'milestone': Icon<14, 16>, | ||
'mirror': Icon<16, 16>, | ||
'mortar-board': Icon<16, 16>, | ||
'mute': Icon<16, 16>, | ||
'no-newline': Icon<16, 16>, | ||
'note': Icon<14, 16>, | ||
'octoface': Icon<16, 16>, | ||
'organization': Icon<16, 16>, | ||
'package': Icon<16, 16>, | ||
'paintcan': Icon<12, 16>, | ||
'pencil': Icon<14, 16>, | ||
'person': Icon<12, 16>, | ||
'pin': Icon<16, 16>, | ||
'play': Icon<14, 16>, | ||
'plug': Icon<14, 16>, | ||
'plus': Icon<12, 16>, | ||
'plus-small': Icon<7, 16>, | ||
'primitive-dot': Icon<8, 16>, | ||
'primitive-dot-stroke': Icon<8, 16>, | ||
'primitive-square': Icon<8, 16>, | ||
'project': Icon<15, 16>, | ||
'pulse': Icon<14, 16>, | ||
'question': Icon<14, 16>, | ||
'quote': Icon<14, 16>, | ||
'radio-tower': Icon<16, 16>, | ||
'reply': Icon<14, 16>, | ||
'repo': Icon<12, 16>, | ||
'repo-clone': Icon<16, 16>, | ||
'repo-force-push': Icon<12, 16>, | ||
'repo-forked': Icon<10, 16>, | ||
'repo-pull': Icon<16, 16>, | ||
'repo-push': Icon<12, 16>, | ||
'repo-template': Icon<14, 16>, | ||
'repo-template-private': Icon<14, 16>, | ||
'report': Icon<16, 16>, | ||
'request-changes': Icon<16, 16>, | ||
'rocket': Icon<16, 16>, | ||
'rss': Icon<10, 16>, | ||
'ruby': Icon<16, 16>, | ||
'saved': Icon<16, 16>, | ||
'screen-full': Icon<14, 16>, | ||
'screen-normal': Icon<14, 16>, | ||
'search': Icon<16, 16>, | ||
'server': Icon<12, 16>, | ||
'settings': Icon<16, 16>, | ||
'shield': Icon<14, 16>, | ||
'shield-check': Icon<16, 16>, | ||
'shield-lock': Icon<14, 16>, | ||
'shield-x': Icon<16, 16>, | ||
'sign-in': Icon<14, 16>, | ||
'sign-out': Icon<16, 17>, | ||
'skip': Icon<16, 16>, | ||
'smiley': Icon<16, 16>, | ||
'squirrel': Icon<16, 16>, | ||
'star': Icon<14, 16>, | ||
'stop': Icon<14, 16>, | ||
'sync': Icon<12, 16>, | ||
'tag': Icon<15, 16>, | ||
'tasklist': Icon<16, 16>, | ||
'telescope': Icon<14, 16>, | ||
'terminal': Icon<14, 16>, | ||
'text-size': Icon<18, 16>, | ||
'three-bars': Icon<12, 16>, | ||
'thumbsdown': Icon<16, 16>, | ||
'thumbsup': Icon<16, 16>, | ||
'tools': Icon<16, 16>, | ||
'trashcan': Icon<12, 16>, | ||
'triangle-down': Icon<12, 16>, | ||
'triangle-left': Icon<6, 16>, | ||
'triangle-right': Icon<6, 16>, | ||
'triangle-up': Icon<12, 16>, | ||
'unfold': Icon<14, 16>, | ||
'unmute': Icon<16, 16>, | ||
'unsaved': Icon<16, 16>, | ||
'unverified': Icon<16, 16>, | ||
'verified': Icon<16, 16>, | ||
'versions': Icon<14, 16>, | ||
'watch': Icon<12, 16>, | ||
'workflow': Icon<16, 16>, | ||
'workflow-all': Icon<16, 16>, | ||
'x': Icon<12, 16>, | ||
'zap': Icon<10, 16> | ||
interface IconProps { | ||
'aria-label'?: string | ||
className?: string | ||
fill?: string | ||
size?: number | Size | ||
verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset' | ||
} | ||
declare const iconsByName: iconsByName | ||
declare function getIconByName<T extends keyof iconsByName>( | ||
name: T | ||
): iconsByName[T]; | ||
declare function getIconByName(name: string): Icon | undefined | ||
type Icon = React.FC<IconProps> | ||
declare const AlertIcon: Icon | ||
declare const ArchiveIcon: Icon | ||
declare const ArrowBothIcon: Icon | ||
declare const ArrowDownIcon: Icon | ||
declare const ArrowDownLeftIcon: Icon | ||
declare const ArrowDownRightIcon: Icon | ||
declare const ArrowLeftIcon: Icon | ||
declare const ArrowRightIcon: Icon | ||
declare const ArrowSwitchIcon: Icon | ||
declare const ArrowUpIcon: Icon | ||
declare const ArrowUpLeftIcon: Icon | ||
declare const ArrowUpRightIcon: Icon | ||
declare const BeakerIcon: Icon | ||
declare const BellIcon: Icon | ||
declare const BellFillIcon: Icon | ||
declare const BellSlashIcon: Icon | ||
declare const BlockedIcon: Icon | ||
declare const BoldIcon: Icon | ||
declare const BookIcon: Icon | ||
declare const BookmarkIcon: Icon | ||
declare const BookmarkFillIcon: Icon | ||
declare const BookmarkSlashIcon: Icon | ||
declare const BookmarkSlashFillIcon: Icon | ||
declare const BriefcaseIcon: Icon | ||
declare const BroadcastIcon: Icon | ||
declare const BrowserIcon: Icon | ||
declare const BugIcon: Icon | ||
declare const CalendarIcon: Icon | ||
declare const CheckIcon: Icon | ||
declare const CheckCircleIcon: Icon | ||
declare const CheckCircleFillIcon: Icon | ||
declare const ChecklistIcon: Icon | ||
declare const ChevronDownIcon: Icon | ||
declare const ChevronLeftIcon: Icon | ||
declare const ChevronRightIcon: Icon | ||
declare const ChevronUpIcon: Icon | ||
declare const CircleIcon: Icon | ||
declare const CircleSlashIcon: Icon | ||
declare const ClockIcon: Icon | ||
declare const CodeIcon: Icon | ||
declare const CodeReviewIcon: Icon | ||
declare const CodeSquareIcon: Icon | ||
declare const CodescanIcon: Icon | ||
declare const CodescanCheckmarkIcon: Icon | ||
declare const CodespacesIcon: Icon | ||
declare const ColumnsIcon: Icon | ||
declare const CommentIcon: Icon | ||
declare const CommentDiscussionIcon: Icon | ||
declare const CommitIcon: Icon | ||
declare const ContainerIcon: Icon | ||
declare const CopyIcon: Icon | ||
declare const CpuIcon: Icon | ||
declare const CreditCardIcon: Icon | ||
declare const CrossReferenceIcon: Icon | ||
declare const DashIcon: Icon | ||
declare const DatabaseIcon: Icon | ||
declare const DependabotIcon: Icon | ||
declare const DesktopDownloadIcon: Icon | ||
declare const DeviceCameraIcon: Icon | ||
declare const DeviceCameraVideoIcon: Icon | ||
declare const DeviceDesktopIcon: Icon | ||
declare const DeviceMobileIcon: Icon | ||
declare const DiamondIcon: Icon | ||
declare const DiffIcon: Icon | ||
declare const DiffAddedIcon: Icon | ||
declare const DiffIgnoredIcon: Icon | ||
declare const DiffModifiedIcon: Icon | ||
declare const DiffRemovedIcon: Icon | ||
declare const DiffRenamedIcon: Icon | ||
declare const DotIcon: Icon | ||
declare const DotFillIcon: Icon | ||
declare const DownloadIcon: Icon | ||
declare const DuplicateIcon: Icon | ||
declare const EllipsisIcon: Icon | ||
declare const EyeIcon: Icon | ||
declare const EyeClosedIcon: Icon | ||
declare const FileIcon: Icon | ||
declare const FileBadgeIcon: Icon | ||
declare const FileBinaryIcon: Icon | ||
declare const FileCodeIcon: Icon | ||
declare const FileDiffIcon: Icon | ||
declare const FileDirectoryIcon: Icon | ||
declare const FileDirectoryFillIcon: Icon | ||
declare const FileMediaIcon: Icon | ||
declare const FileSubmoduleIcon: Icon | ||
declare const FileSymlinkFileIcon: Icon | ||
declare const FileZipIcon: Icon | ||
declare const FilterIcon: Icon | ||
declare const FlameIcon: Icon | ||
declare const FoldIcon: Icon | ||
declare const FoldDownIcon: Icon | ||
declare const FoldUpIcon: Icon | ||
declare const GearIcon: Icon | ||
declare const GiftIcon: Icon | ||
declare const GitBranchIcon: Icon | ||
declare const GitCommitIcon: Icon | ||
declare const GitCompareIcon: Icon | ||
declare const GitMergeIcon: Icon | ||
declare const GitPullRequestIcon: Icon | ||
declare const GitPullRequestClosedIcon: Icon | ||
declare const GitPullRequestDraftIcon: Icon | ||
declare const GlobeIcon: Icon | ||
declare const GrabberIcon: Icon | ||
declare const GraphIcon: Icon | ||
declare const HashIcon: Icon | ||
declare const HeadingIcon: Icon | ||
declare const HeartIcon: Icon | ||
declare const HeartFillIcon: Icon | ||
declare const HistoryIcon: Icon | ||
declare const HomeIcon: Icon | ||
declare const HomeFillIcon: Icon | ||
declare const HorizontalRuleIcon: Icon | ||
declare const HourglassIcon: Icon | ||
declare const HubotIcon: Icon | ||
declare const ImageIcon: Icon | ||
declare const InboxIcon: Icon | ||
declare const InfinityIcon: Icon | ||
declare const InfoIcon: Icon | ||
declare const IssueClosedIcon: Icon | ||
declare const IssueDraftIcon: Icon | ||
declare const IssueOpenedIcon: Icon | ||
declare const IssueReopenedIcon: Icon | ||
declare const ItalicIcon: Icon | ||
declare const KebabHorizontalIcon: Icon | ||
declare const KeyIcon: Icon | ||
declare const KeyAsteriskIcon: Icon | ||
declare const LawIcon: Icon | ||
declare const LightBulbIcon: Icon | ||
declare const LinkIcon: Icon | ||
declare const LinkExternalIcon: Icon | ||
declare const ListOrderedIcon: Icon | ||
declare const ListUnorderedIcon: Icon | ||
declare const LocationIcon: Icon | ||
declare const LockIcon: Icon | ||
declare const LogoGistIcon: Icon | ||
declare const LogoGithubIcon: Icon | ||
declare const MailIcon: Icon | ||
declare const MarkGithubIcon: Icon | ||
declare const MarkdownIcon: Icon | ||
declare const MegaphoneIcon: Icon | ||
declare const MentionIcon: Icon | ||
declare const MeterIcon: Icon | ||
declare const MilestoneIcon: Icon | ||
declare const MirrorIcon: Icon | ||
declare const MoonIcon: Icon | ||
declare const MortarBoardIcon: Icon | ||
declare const MultiSelectIcon: Icon | ||
declare const MuteIcon: Icon | ||
declare const NoEntryIcon: Icon | ||
declare const NorthStarIcon: Icon | ||
declare const NoteIcon: Icon | ||
declare const NumberIcon: Icon | ||
declare const OrganizationIcon: Icon | ||
declare const PackageIcon: Icon | ||
declare const PackageDependenciesIcon: Icon | ||
declare const PackageDependentsIcon: Icon | ||
declare const PaintbrushIcon: Icon | ||
declare const PaperAirplaneIcon: Icon | ||
declare const PasteIcon: Icon | ||
declare const PencilIcon: Icon | ||
declare const PeopleIcon: Icon | ||
declare const PersonIcon: Icon | ||
declare const PersonAddIcon: Icon | ||
declare const PersonFillIcon: Icon | ||
declare const PinIcon: Icon | ||
declare const PlayIcon: Icon | ||
declare const PlugIcon: Icon | ||
declare const PlusIcon: Icon | ||
declare const PlusCircleIcon: Icon | ||
declare const ProjectIcon: Icon | ||
declare const PulseIcon: Icon | ||
declare const QuestionIcon: Icon | ||
declare const QuoteIcon: Icon | ||
declare const ReplyIcon: Icon | ||
declare const RepoIcon: Icon | ||
declare const RepoCloneIcon: Icon | ||
declare const RepoForkedIcon: Icon | ||
declare const RepoPullIcon: Icon | ||
declare const RepoPushIcon: Icon | ||
declare const RepoTemplateIcon: Icon | ||
declare const ReportIcon: Icon | ||
declare const RocketIcon: Icon | ||
declare const RowsIcon: Icon | ||
declare const RssIcon: Icon | ||
declare const RubyIcon: Icon | ||
declare const ScreenFullIcon: Icon | ||
declare const ScreenNormalIcon: Icon | ||
declare const SearchIcon: Icon | ||
declare const ServerIcon: Icon | ||
declare const ShareIcon: Icon | ||
declare const ShareAndroidIcon: Icon | ||
declare const ShieldIcon: Icon | ||
declare const ShieldCheckIcon: Icon | ||
declare const ShieldLockIcon: Icon | ||
declare const ShieldXIcon: Icon | ||
declare const SidebarCollapseIcon: Icon | ||
declare const SidebarExpandIcon: Icon | ||
declare const SignInIcon: Icon | ||
declare const SignOutIcon: Icon | ||
declare const SingleSelectIcon: Icon | ||
declare const SkipIcon: Icon | ||
declare const SmileyIcon: Icon | ||
declare const SortAscIcon: Icon | ||
declare const SortDescIcon: Icon | ||
declare const SquareIcon: Icon | ||
declare const SquareFillIcon: Icon | ||
declare const SquirrelIcon: Icon | ||
declare const StackIcon: Icon | ||
declare const StarIcon: Icon | ||
declare const StarFillIcon: Icon | ||
declare const StopIcon: Icon | ||
declare const StopwatchIcon: Icon | ||
declare const StrikethroughIcon: Icon | ||
declare const SunIcon: Icon | ||
declare const SyncIcon: Icon | ||
declare const TabIcon: Icon | ||
declare const TableIcon: Icon | ||
declare const TagIcon: Icon | ||
declare const TasklistIcon: Icon | ||
declare const TelescopeIcon: Icon | ||
declare const TelescopeFillIcon: Icon | ||
declare const TerminalIcon: Icon | ||
declare const ThreeBarsIcon: Icon | ||
declare const ThumbsdownIcon: Icon | ||
declare const ThumbsupIcon: Icon | ||
declare const ToolsIcon: Icon | ||
declare const TrashIcon: Icon | ||
declare const TriangleDownIcon: Icon | ||
declare const TriangleLeftIcon: Icon | ||
declare const TriangleRightIcon: Icon | ||
declare const TriangleUpIcon: Icon | ||
declare const TypographyIcon: Icon | ||
declare const UnfoldIcon: Icon | ||
declare const UnlockIcon: Icon | ||
declare const UnmuteIcon: Icon | ||
declare const UnverifiedIcon: Icon | ||
declare const UploadIcon: Icon | ||
declare const VerifiedIcon: Icon | ||
declare const VersionsIcon: Icon | ||
declare const VideoIcon: Icon | ||
declare const WorkflowIcon: Icon | ||
declare const XIcon: Icon | ||
declare const XCircleIcon: Icon | ||
declare const XCircleFillIcon: Icon | ||
declare const ZapIcon: Icon | ||
export { | ||
Icon, | ||
getIconByName, | ||
iconsByName, | ||
Alert, | ||
Archive, | ||
ArrowBoth, | ||
ArrowDown, | ||
ArrowLeft, | ||
ArrowRight, | ||
ArrowSmallDown, | ||
ArrowSmallLeft, | ||
ArrowSmallRight, | ||
ArrowSmallUp, | ||
ArrowUp, | ||
Beaker, | ||
Bell, | ||
Bold, | ||
Book, | ||
Bookmark, | ||
Briefcase, | ||
Broadcast, | ||
Browser, | ||
Bug, | ||
Calendar, | ||
Check, | ||
Checklist, | ||
ChevronDown, | ||
ChevronLeft, | ||
ChevronRight, | ||
ChevronUp, | ||
CircleSlash, | ||
CircuitBoard, | ||
Clippy, | ||
Clock, | ||
CloudDownload, | ||
CloudUpload, | ||
Code, | ||
Comment, | ||
CommentDiscussion, | ||
CreditCard, | ||
Dash, | ||
Dashboard, | ||
Database, | ||
Dependent, | ||
DesktopDownload, | ||
DeviceCamera, | ||
DeviceCameraVideo, | ||
DeviceDesktop, | ||
DeviceMobile, | ||
Diff, | ||
DiffAdded, | ||
DiffIgnored, | ||
DiffModified, | ||
DiffRemoved, | ||
DiffRenamed, | ||
Ellipsis, | ||
Eye, | ||
EyeClosed, | ||
File, | ||
FileBinary, | ||
FileCode, | ||
FileDirectory, | ||
FileMedia, | ||
FilePdf, | ||
FileSubmodule, | ||
FileSymlinkDirectory, | ||
FileSymlinkFile, | ||
FileZip, | ||
Flame, | ||
Fold, | ||
FoldDown, | ||
FoldUp, | ||
Gear, | ||
Gift, | ||
Gist, | ||
GistSecret, | ||
GitBranch, | ||
GitCommit, | ||
GitCompare, | ||
GitMerge, | ||
GitPullRequest, | ||
GithubAction, | ||
Globe, | ||
Grabber, | ||
Graph, | ||
Heart, | ||
HeartOutline, | ||
History, | ||
Home, | ||
HorizontalRule, | ||
Hubot, | ||
Inbox, | ||
Infinity, | ||
Info, | ||
IssueClosed, | ||
IssueOpened, | ||
IssueReopened, | ||
Italic, | ||
Jersey, | ||
KebabHorizontal, | ||
KebabVertical, | ||
Key, | ||
Keyboard, | ||
Law, | ||
LightBulb, | ||
LineArrowDown, | ||
LineArrowLeft, | ||
LineArrowRight, | ||
LineArrowUp, | ||
Link, | ||
LinkExternal, | ||
ListOrdered, | ||
ListUnordered, | ||
Location, | ||
Lock, | ||
LogoGist, | ||
LogoGithub, | ||
Mail, | ||
MailRead, | ||
MarkGithub, | ||
Markdown, | ||
Megaphone, | ||
Mention, | ||
Milestone, | ||
Mirror, | ||
MortarBoard, | ||
Mute, | ||
NoNewline, | ||
Note, | ||
Octoface, | ||
Organization, | ||
Package, | ||
Paintcan, | ||
Pencil, | ||
Person, | ||
Pin, | ||
Play, | ||
Plug, | ||
Plus, | ||
PlusSmall, | ||
PrimitiveDot, | ||
PrimitiveDotStroke, | ||
PrimitiveSquare, | ||
Project, | ||
Pulse, | ||
Question, | ||
Quote, | ||
RadioTower, | ||
Reply, | ||
Repo, | ||
RepoClone, | ||
RepoForcePush, | ||
RepoForked, | ||
RepoPull, | ||
RepoPush, | ||
RepoTemplate, | ||
RepoTemplatePrivate, | ||
Report, | ||
RequestChanges, | ||
Rocket, | ||
Rss, | ||
Ruby, | ||
Saved, | ||
ScreenFull, | ||
ScreenNormal, | ||
Search, | ||
Server, | ||
Settings, | ||
Shield, | ||
ShieldCheck, | ||
ShieldLock, | ||
ShieldX, | ||
SignIn, | ||
SignOut, | ||
Skip, | ||
Smiley, | ||
Squirrel, | ||
Star, | ||
Stop, | ||
Sync, | ||
Tag, | ||
Tasklist, | ||
Telescope, | ||
Terminal, | ||
TextSize, | ||
ThreeBars, | ||
Thumbsdown, | ||
Thumbsup, | ||
Tools, | ||
Trashcan, | ||
TriangleDown, | ||
TriangleLeft, | ||
TriangleRight, | ||
TriangleUp, | ||
Unfold, | ||
Unmute, | ||
Unsaved, | ||
Unverified, | ||
Verified, | ||
Versions, | ||
Watch, | ||
Workflow, | ||
WorkflowAll, | ||
X, | ||
Zap | ||
IconProps, | ||
AlertIcon, | ||
ArchiveIcon, | ||
ArrowBothIcon, | ||
ArrowDownIcon, | ||
ArrowDownLeftIcon, | ||
ArrowDownRightIcon, | ||
ArrowLeftIcon, | ||
ArrowRightIcon, | ||
ArrowSwitchIcon, | ||
ArrowUpIcon, | ||
ArrowUpLeftIcon, | ||
ArrowUpRightIcon, | ||
BeakerIcon, | ||
BellIcon, | ||
BellFillIcon, | ||
BellSlashIcon, | ||
BlockedIcon, | ||
BoldIcon, | ||
BookIcon, | ||
BookmarkIcon, | ||
BookmarkFillIcon, | ||
BookmarkSlashIcon, | ||
BookmarkSlashFillIcon, | ||
BriefcaseIcon, | ||
BroadcastIcon, | ||
BrowserIcon, | ||
BugIcon, | ||
CalendarIcon, | ||
CheckIcon, | ||
CheckCircleIcon, | ||
CheckCircleFillIcon, | ||
ChecklistIcon, | ||
ChevronDownIcon, | ||
ChevronLeftIcon, | ||
ChevronRightIcon, | ||
ChevronUpIcon, | ||
CircleIcon, | ||
CircleSlashIcon, | ||
ClockIcon, | ||
CodeIcon, | ||
CodeReviewIcon, | ||
CodeSquareIcon, | ||
CodescanIcon, | ||
CodescanCheckmarkIcon, | ||
CodespacesIcon, | ||
ColumnsIcon, | ||
CommentIcon, | ||
CommentDiscussionIcon, | ||
CommitIcon, | ||
ContainerIcon, | ||
CopyIcon, | ||
CpuIcon, | ||
CreditCardIcon, | ||
CrossReferenceIcon, | ||
DashIcon, | ||
DatabaseIcon, | ||
DependabotIcon, | ||
DesktopDownloadIcon, | ||
DeviceCameraIcon, | ||
DeviceCameraVideoIcon, | ||
DeviceDesktopIcon, | ||
DeviceMobileIcon, | ||
DiamondIcon, | ||
DiffIcon, | ||
DiffAddedIcon, | ||
DiffIgnoredIcon, | ||
DiffModifiedIcon, | ||
DiffRemovedIcon, | ||
DiffRenamedIcon, | ||
DotIcon, | ||
DotFillIcon, | ||
DownloadIcon, | ||
DuplicateIcon, | ||
EllipsisIcon, | ||
EyeIcon, | ||
EyeClosedIcon, | ||
FileIcon, | ||
FileBadgeIcon, | ||
FileBinaryIcon, | ||
FileCodeIcon, | ||
FileDiffIcon, | ||
FileDirectoryIcon, | ||
FileDirectoryFillIcon, | ||
FileMediaIcon, | ||
FileSubmoduleIcon, | ||
FileSymlinkFileIcon, | ||
FileZipIcon, | ||
FilterIcon, | ||
FlameIcon, | ||
FoldIcon, | ||
FoldDownIcon, | ||
FoldUpIcon, | ||
GearIcon, | ||
GiftIcon, | ||
GitBranchIcon, | ||
GitCommitIcon, | ||
GitCompareIcon, | ||
GitMergeIcon, | ||
GitPullRequestIcon, | ||
GitPullRequestClosedIcon, | ||
GitPullRequestDraftIcon, | ||
GlobeIcon, | ||
GrabberIcon, | ||
GraphIcon, | ||
HashIcon, | ||
HeadingIcon, | ||
HeartIcon, | ||
HeartFillIcon, | ||
HistoryIcon, | ||
HomeIcon, | ||
HomeFillIcon, | ||
HorizontalRuleIcon, | ||
HourglassIcon, | ||
HubotIcon, | ||
ImageIcon, | ||
InboxIcon, | ||
InfinityIcon, | ||
InfoIcon, | ||
IssueClosedIcon, | ||
IssueDraftIcon, | ||
IssueOpenedIcon, | ||
IssueReopenedIcon, | ||
ItalicIcon, | ||
KebabHorizontalIcon, | ||
KeyIcon, | ||
KeyAsteriskIcon, | ||
LawIcon, | ||
LightBulbIcon, | ||
LinkIcon, | ||
LinkExternalIcon, | ||
ListOrderedIcon, | ||
ListUnorderedIcon, | ||
LocationIcon, | ||
LockIcon, | ||
LogoGistIcon, | ||
LogoGithubIcon, | ||
MailIcon, | ||
MarkGithubIcon, | ||
MarkdownIcon, | ||
MegaphoneIcon, | ||
MentionIcon, | ||
MeterIcon, | ||
MilestoneIcon, | ||
MirrorIcon, | ||
MoonIcon, | ||
MortarBoardIcon, | ||
MultiSelectIcon, | ||
MuteIcon, | ||
NoEntryIcon, | ||
NorthStarIcon, | ||
NoteIcon, | ||
NumberIcon, | ||
OrganizationIcon, | ||
PackageIcon, | ||
PackageDependenciesIcon, | ||
PackageDependentsIcon, | ||
PaintbrushIcon, | ||
PaperAirplaneIcon, | ||
PasteIcon, | ||
PencilIcon, | ||
PeopleIcon, | ||
PersonIcon, | ||
PersonAddIcon, | ||
PersonFillIcon, | ||
PinIcon, | ||
PlayIcon, | ||
PlugIcon, | ||
PlusIcon, | ||
PlusCircleIcon, | ||
ProjectIcon, | ||
PulseIcon, | ||
QuestionIcon, | ||
QuoteIcon, | ||
ReplyIcon, | ||
RepoIcon, | ||
RepoCloneIcon, | ||
RepoForkedIcon, | ||
RepoPullIcon, | ||
RepoPushIcon, | ||
RepoTemplateIcon, | ||
ReportIcon, | ||
RocketIcon, | ||
RowsIcon, | ||
RssIcon, | ||
RubyIcon, | ||
ScreenFullIcon, | ||
ScreenNormalIcon, | ||
SearchIcon, | ||
ServerIcon, | ||
ShareIcon, | ||
ShareAndroidIcon, | ||
ShieldIcon, | ||
ShieldCheckIcon, | ||
ShieldLockIcon, | ||
ShieldXIcon, | ||
SidebarCollapseIcon, | ||
SidebarExpandIcon, | ||
SignInIcon, | ||
SignOutIcon, | ||
SingleSelectIcon, | ||
SkipIcon, | ||
SmileyIcon, | ||
SortAscIcon, | ||
SortDescIcon, | ||
SquareIcon, | ||
SquareFillIcon, | ||
SquirrelIcon, | ||
StackIcon, | ||
StarIcon, | ||
StarFillIcon, | ||
StopIcon, | ||
StopwatchIcon, | ||
StrikethroughIcon, | ||
SunIcon, | ||
SyncIcon, | ||
TabIcon, | ||
TableIcon, | ||
TagIcon, | ||
TasklistIcon, | ||
TelescopeIcon, | ||
TelescopeFillIcon, | ||
TerminalIcon, | ||
ThreeBarsIcon, | ||
ThumbsdownIcon, | ||
ThumbsupIcon, | ||
ToolsIcon, | ||
TrashIcon, | ||
TriangleDownIcon, | ||
TriangleLeftIcon, | ||
TriangleRightIcon, | ||
TriangleUpIcon, | ||
TypographyIcon, | ||
UnfoldIcon, | ||
UnlockIcon, | ||
UnmuteIcon, | ||
UnverifiedIcon, | ||
UploadIcon, | ||
VerifiedIcon, | ||
VersionsIcon, | ||
VideoIcon, | ||
WorkflowIcon, | ||
XIcon, | ||
XCircleIcon, | ||
XCircleFillIcon, | ||
ZapIcon | ||
} |
@@ -6,21 +6,20 @@ import * as React from 'react' | ||
type Size = 'small' | 'medium' | 'large' | ||
export interface OcticonProps { | ||
ariaLabel?: string | ||
'aria-label'?: string | ||
children?: React.ReactElement<any> | ||
className?: string | ||
height?: number | ||
icon: Icon | ||
fill?: string | ||
icon?: Icon | ||
size?: number | Size | ||
verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset' | ||
width?: number | ||
} | ||
declare const Octicon: React.SFC<OcticonProps> | ||
/** | ||
* @deprecated Use icon components on their own instead (e.g. `<Octicon icon={AlertIcon} />` → `<AlertIcon />`) | ||
*/ | ||
declare const Octicon: React.FC<OcticonProps> | ||
export default Octicon | ||
export function createIcon<C extends React.SFC<{}>, W extends number, H extends number>( | ||
component: C, | ||
size: [W, H] | ||
): Icon<W, H> | ||
export * from './icons' |
{ | ||
"name": "@primer/octicons-react", | ||
"version": "0.0.0-27f6545", | ||
"version": "0.0.0-286842d", | ||
"description": "A scalable set of icons handcrafted with <3 by GitHub.", | ||
"homepage": "https://octicons.github.com", | ||
"homepage": "https://primer.style/octicons", | ||
"author": "GitHub, Inc.", | ||
@@ -10,2 +10,3 @@ "license": "MIT", | ||
"module": "dist/index.esm.js", | ||
"sideEffects": false, | ||
"types": "dist/index.d.ts", | ||
@@ -30,6 +31,7 @@ "repository": "primer/octicons", | ||
], | ||
"dependencies": { | ||
"prop-types": "^15.6.1" | ||
}, | ||
"devDependencies": { | ||
"@github/prettier-config": "0.0.4", | ||
"@primer/components": "27.0.0", | ||
"@testing-library/jest-dom": "^5.3.0", | ||
"@testing-library/react": "^10.0.2", | ||
"@types/react": "^16.4.6", | ||
@@ -39,16 +41,16 @@ "babel-preset-env": "^1.7.0", | ||
"babel-preset-stage-0": "^6.24.1", | ||
"eslint": "^5.0.1", | ||
"eslint-plugin-github": "^1.1.0", | ||
"eslint": "^6.5.1", | ||
"eslint-plugin-github": "4.1.3", | ||
"eslint-plugin-jest": "^21.17.0", | ||
"eslint-plugin-jsx-a11y": "6.4.1", | ||
"eslint-plugin-react": "7.23.2", | ||
"fs-extra": "^6.0.1", | ||
"jest": "^23.2.0", | ||
"next": "^5.1.0", | ||
"primer-react": "0.0.6-alpha.1", | ||
"next": "^11.1.0", | ||
"react": "^16.4.0", | ||
"react-dom": "^16.4.1", | ||
"react-test-renderer": "^16.4.1", | ||
"rollup": "^0.62.0", | ||
"rollup-plugin-babel": "^3.0.5", | ||
"rollup-plugin-commonjs": "^9.1.3", | ||
"typescript": "^2.9.2" | ||
"typescript": "^3.7.5" | ||
}, | ||
@@ -55,0 +57,0 @@ "peerDependencies": { |
import React from 'react' | ||
import {Block, Text} from 'primer-react' | ||
import {Box, Text} from '@primer/components' | ||
import pkg from '../package.json' | ||
@@ -9,3 +9,3 @@ import Octicon, {iconsByName} from '../' | ||
return ( | ||
<Block p={4}> | ||
<Box p={4}> | ||
<table className="data-table"> | ||
@@ -55,4 +55,4 @@ <thead> | ||
</table> | ||
</Block> | ||
</Box> | ||
) | ||
} |
196
README.md
@@ -1,197 +0,5 @@ | ||
# [Octicons] for React | ||
# @primer/octicons-react | ||
[![npm version](https://img.shields.io/npm/v/@primer/octicons-react.svg)](https://www.npmjs.org/package/@primer/octicons-react) | ||
## Install | ||
``` | ||
$ npm install @primer/octicons-react --save | ||
``` | ||
## Usage | ||
### `<Octicon>` | ||
The `<Octicon>` component is really just the "shell" of an Octicon that renders | ||
the `<svg>` element and all of its attributes. To render a specific icon, you | ||
must pass it either via the `icon` prop, or as the only child: | ||
```jsx | ||
/** | ||
* The prop form is shorter, but doesn't allow you to pass icon props. | ||
*/ | ||
<Octicon icon={Icon} /> | ||
/** | ||
* The child form allows you to pass props. | ||
*/ | ||
<Octicon><Icon x={10}/></Octicon> | ||
``` | ||
Note that none of our builtin icons take props, so unless you're creating | ||
[custom icons](#custom-icons) you'll probably want to use the `icon` prop form. | ||
### Icons | ||
The `@primer/octicons-react` module exports the `Octicon` component as | ||
`default` and the individual icon symbols as separate [named | ||
exports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This | ||
allows you to import only the icons that you need without blowing up your | ||
bundle: | ||
```jsx | ||
import React from 'react' | ||
import Octicon, {Beaker, Zap} from '@primer/octicons-react' | ||
export default function Icon({boom}) { | ||
return <Octicon icon={boom ? Zap : Beaker}/> | ||
} | ||
``` | ||
If you were to compile this example with a tool that supports [tree-shaking][] | ||
(such as Webpack, Rollup, or Parcel) the resulting bundle would only include | ||
the "zap" and "beaker" icons. | ||
### All icons | ||
If you don't mind your bundle being huge or you need to be able to render | ||
arbitrarily named icons at runtime, you can import either of the following | ||
named exports: | ||
#### `getIconByName()` | ||
The `getIconByName` export is a function that takes a lowercase octicon name | ||
(such as `arrow-right`) and returns the corresponding icon class. Using this | ||
helper, it's possible to create an Octicon class that takes a `name` prop and | ||
resolves it to the right component: | ||
```jsx | ||
import React from 'react' | ||
import Octicon, {getIconByName} from '@primer/octicons-react' | ||
export default function OcticonByName({name, ...props}) { | ||
return <Octicon {...props} icon={getIconByName(name)} /> | ||
} | ||
``` | ||
#### `iconsByName` | ||
The `iconsByName` export is an object that maps keys (such as `arrow-right` or | ||
`zap`) to component functions, which you can use to generate listings of all | ||
the octicons: | ||
```jsx | ||
import React from 'react' | ||
import Octicon, {iconsByName} from '@primer/octicons-react' | ||
export default function OcticonsList() { | ||
return ( | ||
<ul> | ||
{Object.keys(iconsByName).map(key => ( | ||
<li key={key}> | ||
<tt>{key}</tt> | ||
<Octicon icon={iconsByName[key]}/> | ||
</li> | ||
))} | ||
</ul> | ||
) | ||
} | ||
``` | ||
### Vertical alignment | ||
By default the octicons have `vertical-align: text-bottom;` applied as inline | ||
styles. You can change the alignment via the `verticalAlign` prop, which can be | ||
either `middle`, `text-bottom`, `text-top`, or `top`. | ||
```js | ||
import Octicon, {Repo} from '@primer/octicons-react' | ||
export default () => ( | ||
<h1> | ||
<Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github | ||
</h1> | ||
) | ||
``` | ||
### `ariaLabel` | ||
You have the option of adding accessibility information to the icon with the | ||
[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the | ||
capitalization of `L`!). | ||
```js | ||
// Example usage | ||
import Octicon, {Plus} from '@primer/octicons-react' | ||
export default () => ( | ||
<button> | ||
<Octicon icon={Plus} ariaLabel="Add new item" /> New | ||
</button> | ||
) | ||
``` | ||
### Sizes | ||
The `size` prop takes `small`, `medium`, and `large` values that can be used to | ||
render octicons at standard sizes: | ||
| Prop | Rendered Size | | ||
| :- | :- | | ||
| `size='small'` | 16px height by `computed` width | | ||
| `size='medium'` | 32px height by `computed` width | | ||
| `size='large'` | 64px height by `computed` width | | ||
```js | ||
// Example usage | ||
import Octicon, {LogoGithub} from '@primer/octicons-react' | ||
export default () => ( | ||
<h1> | ||
<a href='https://github.com'> | ||
<Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/> | ||
</a> | ||
</h1> | ||
) | ||
``` | ||
## Custom icons | ||
Each of our icon components is really just a function that renders its SVG | ||
`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component | ||
determines the `viewBox` of the `<svg>` element by first looking for a `size` | ||
array on the icon component class. For instance, if you wanted to create a | ||
custom icon that consisted of three circles side by side, you could do this: | ||
```jsx | ||
import React from 'react' | ||
import Octicon from '@primer/octicons-react' | ||
function CirclesIcon() { | ||
return ( | ||
<React.Fragment> | ||
<circle r={5} cx={5} cy={5}/> | ||
<circle r={5} cx={15} cy={5}/> | ||
<circle r={5} cx={25} cy={5}/> | ||
</React.Fragment> | ||
) | ||
} | ||
CirclesIcon.size = [30, 10] | ||
export default CirclesOcticon(props) { | ||
return <Octicon {...props} icon={CirclesIcon} /> | ||
} | ||
``` | ||
## License | ||
(c) GitHub, Inc. | ||
When using the GitHub logos, be sure to follow the [GitHub logo | ||
guidelines](https://github.com/logos). | ||
[MIT](./LICENSE) | ||
[octicons]: https://octicons.github.com/ | ||
[primer]: https://github.com/primer/primer | ||
[docs]: http://primercss.io/ | ||
[npm]: https://www.npmjs.com/ | ||
[install-npm]: https://docs.npmjs.com/getting-started/installing-node | ||
[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking | ||
[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute | ||
See https://primer.style/octicons/packages/react |
@@ -9,5 +9,5 @@ { | ||
"jsx": "react", | ||
"lib": ["es2015"] | ||
}, | ||
"files": ["../src/index.d.ts", "./index.tsx"] | ||
"lib": ["es2015"], | ||
"skipLibCheck": true | ||
} | ||
} |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
1163628
1
473
7744
22
5
43
- Removedprop-types@^15.6.1
- Removedobject-assign@4.1.1(transitive)
- Removedprop-types@15.8.1(transitive)
- Removedreact-is@16.13.1(transitive)