import type * as React from "react" /** * The Google product marks, keyed by product. A logo is not a glyph with a * shape you can choose, it is a specific mark in specific colours, so these * are drawn here rather than looked up in an icon set — the same exception * `code-icons` makes, for the same reason. * * Each mark is written without `width` or `height` so the class sizing it * wins, and with `aria-hidden` since a mark stands beside the product name * rather than in place of it. * * The gradient and mask ids inside each mark are prefixed per product. They * are still document-wide names, so a mark drawn twice on one page repeats * them; the duplicates resolve to identical definitions and draw correctly, * but that is the ceiling on what an id in a component can promise. */ type IconProps = React.SVGProps export const googleIcons = { google: (props: IconProps) => ( ), gmail: (props: IconProps) => ( ), googleDocs: (props: IconProps) => ( ), googleDrive: (props: IconProps) => ( ), googleSheets: (props: IconProps) => ( ), googleSlides: (props: IconProps) => ( ), googleCalendar: (props: IconProps) => ( ), gemini: (props: IconProps) => ( ), } /** The products this set has a mark for, and the key each one answers to. */ export type GoogleIconName = keyof typeof googleIcons export type { IconProps as GoogleIconProps }

Google Icons

01Preview

02Installation