diff --git a/packages/react/components/Icon/index.mjs b/packages/react/components/Icon/index.mjs index 5ac9753c75e..906ad28cfc6 100644 --- a/packages/react/components/Icon/index.mjs +++ b/packages/react/components/Icon/index.mjs @@ -5,8 +5,20 @@ import { logoPath } from '@freesewing/config' const page = 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z' -/* - * Used inside the pattern editor +/** + * A component to wrap SVG elements as an icon. + * + * This wraps all icons we provide. The viewBox is 0 0 24 24 so this is for 24x24 icons. + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} */ export const IconWrapper = ({ className = 'tw:w-6 tw:h-6', @@ -16,87 +28,205 @@ export const IconWrapper = ({ fillOpacity = 1, dasharray = null, wrapped = true, -}) => - wrapped ? ( - - {children} - - ) : ( - <> {children} - ) +}) => ( + + {children} + +) -// Looks like a play triangle +/** + * An SVG icon that looks like a play triangle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ApplyIcon = (props) => ( ) -// Looks like a two-column layout +/** + * An SVG icon that looks like a two-column layout + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const AsideIcon = (props) => ( ) -// Looks like a lab beaker +/** + * An SVG icon that looks like a lab beaker + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BeakerIcon = (props) => ( ) -// Looks like a left U-turn that we slightly rotate +/** + * An SVG icon that looks like a left U-turn that we slightly rotate + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BackIcon = (props) => ( ) -// Looks like a red X +/** + * An SVG icon that looks like a red X + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BoolNoIcon = ({ size = 6 }) => ( ) -// Looks like a green checkbox +/** + * An SVG icon that looks like a green checkbox + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BoolYesIcon = ({ size = 6 }) => ( ) -// Looks like a bookmark +/** + * An SVG icon that looks like a bookmark + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BookmarkIcon = (props) => ( ) -// Looks like a circle +/** + * An SVG icon that looks like a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BulletIcon = (props) => ( ) -// Looks lik a speech bubble +/** + * An SVG icon that looks lik a speech bubble + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ChatIcon = (props) => ( ) -// Looks like a circle +/** + * An SVG icon that looks like a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @param {string} [props.label = undefined] - An optional label to put inside the circle + * @returns {JSX.Element} + */ export const CircleIcon = (props) => ( @@ -108,63 +238,171 @@ export const CircleIcon = (props) => ( ) -// Looks like a female-projecting bathing suit +/** + * An SVG icon that looks like a female-projecting bathing suit + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CisFemaleIcon = (props) => ( ) -// Looks like male-projecting swim trunks +/** + * An SVG icon that looks like male-projecting swim trunks + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CisMaleIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that look like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CloneIcon = (props) => ( ) -// Looks like a X +/** + * An SVG icon that looks like an X character + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CloseIcon = (props) => ( ) -// Looks like coding brackets +/** + * An SVG icon that looks like coding brackets + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CodeIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CompareIcon = (props) => ( ) -// Looks like scales of justice +/** + * An SVG icon that looks like scales of justice + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ControlIcon = (props) => ( ) -// Looks like two rounded squares above each other with a bit of offset +/** + * An SVG icon that looks like two rounded squares above each other with a bit of offset + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CopyIcon = (props) => ( ) -// Looks like a page with a smiley on it +/** + * An SVG icon that looks like a page with a smiley on it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CoverPageIcon = (props) => ( @@ -174,35 +412,95 @@ export const CoverPageIcon = (props) => ( ) -// Looks like a museum building +/** + * An SVG icon that looks like a museum building + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CuratedMeasurementsSetIcon = (props) => ( ) -// Looks like a coathanger +/** + * An SVG icon that looks like a coathanger + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DesignIcon = (props) => ( ) -// Looks like a left and right pane with different level of detail +/** + * An SVG icon that looks like a left and right pane with different level of detail + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DetailIcon = (props) => ( ) -// Looks like a document icon +/** + * An SVG icon that looks like a document icon + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DocsIcon = (props) => ( ) -// Looks like a down pointing chevron +/** + * An SVG icon that looks like a down pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DownIcon = (props) => ( ( ) -// Looks like a cloud with an arrow pointing down from it +/** + * An SVG icon that looks like a cloud with an arrow pointing down from it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DownloadIcon = (props) => ( ) -// Looks like a pencil +/** + * An SVG icon that looks like a pencil + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const EditIcon = (props) => ( ) -// Looks like an envelope +/** + * An SVG icon that looks like an envelope + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const EmailIcon = (props) => ( ) -// Looks like FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ErrorIcon = (props) => ( ) -// Looks like arrows pointing outwards +/** + * An SVG icon that looks like arrows pointing outwards + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ExpandIcon = (props) => ( ) -// Looks like a file/sheet with an arrow pointing downwards +/** + * An SVG icon that looks like a file/sheet with an arrow pointing downwards + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ExportIcon = (props) => ( ) -// Looks like a ! in a triangle, is intended to be shown on an error background +/** + * An SVG icon that looks like a ! in a triangle. + * + * This is a specifically styled NoIcon, intended to be shown on an error + * background. + * + * @component + * @param {object} props - All component props + * @param {number} [props.size = 6] - The size (a valid TailwindCSS size number) + * @returns {JSX.Element} + */ export const FailureIcon = ({ size = 6 }) => ( ) -// Looks like a funnel +/** + * An SVG icon that looks like a funnel + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FilterIcon = (props) => ( ) -// Looks like a fingerprint +/** + * An SVG icon that looks like a fingerprint + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FingerprintIcon = (props) => ( ) -// Looks lik an exclamation point inside a circle +/** + * An SVG icon that looks lik an exclamation point inside a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FixmeIcon = (props) => ( ) -// Looks lik a flag +/** + * An SVG icon that looks lik a flag + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FlagIcon = (props) => ( ) -// Looks lik a flag +/** + * An SVG icon that looks lik a FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FlipIcon = (props) => ( ) -// Looks like skully +/** + * An SVG icon that looks like (or is) skully + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FreeSewingIcon = (props) => ( ) -// Looks like a gauge or speedometer +/** + * An SVG icon that looks like a gauge or speedometer + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GaugeIcon = (props) => ( @@ -311,42 +775,114 @@ export const GaugeIcon = (props) => ( ) -// Looks like the octocat +/** + * An SVG icon that looks like the octocat + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GitHubIcon = (props) => ( ) -// Looks like the Google G +/** + * An SVG icon that looks like the Google G + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GoogleIcon = (props) => ( ) -// Looks like abox +/** + * An SVG icon that looks like a box + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GroupIcon = (props) => ( ) -// Looks like a heart +/** + * An SVG icon that looks like a heart + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const HeartIcon = (props) => ( ) -// Looks like a question mark in a circle +/** + * An SVG icon that looks like a question mark in a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const HelpIcon = (props) => ( ) -// Looks like a pie with a slice a bit out of it +/** + * An SVG icon that looks like a pie with a slice a bit out of it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const IncludeIcon = (props) => ( @@ -354,133 +890,361 @@ export const IncludeIcon = (props) => ( ) -// Looks like the Instagram logo +/** + * An SVG icon that looks like the Instagram logo + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const InstagramIcon = (props) => ( ) -// Looks like a key +/** + * An SVG icon that looks like a key + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const KeyIcon = (props) => ( ) -// Looks like a rectangle with rounded corners (like a full screen display) +/** + * An SVG icon that looks like a rectangle with rounded corners (like a full screen display) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const KioskIcon = (props) => ( ) -// Looks like a left pointing chevron +/** + * An SVG icon that looks like a left pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const LeftIcon = (props) => ( ) -// Looks like a chain link +/** + * An SVG icon that looks like a chain link + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const LinkIcon = (props) => ( ) -// Looks like a bullet list +/** + * An SVG icon that looks like a bullet list + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ListIcon = (props) => ( ) -// Looks like a padlock +/** + * An SVG icon that looks like a padlock + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const LockIcon = (props) => ( ) -// Looks like 4 boxes spaces out +/** + * An SVG icon that looks like 4 boxes spaces out + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MarginIcon = (props) => ( ) -// Looks like the Mastodon logo +/** + * An SVG icon that looks like the Mastodon logo + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MastodonIcon = (props) => ( ) -// Looks like a tape measure +/** + * An SVG icon that looks like a tape measure + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MeasurementsIcon = (props) => ( ) -// Looks like two people's heads next/behinf to each other, one bigger, one smaller +/** + * An SVG icon that looks like two people's heads next/behind to each other, one bigger, one smaller + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MeasurementsSetIcon = (props) => ( ) -// Looks like 3 horizontal lines (hamburger menu) +/** + * An SVG icon that looks like 3 horizontal lines (hamburger menu) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MenuIcon = (props) => ( ) -// Looks like a person icon with a + sign +/** + * An SVG icon that looks like a person icon with a + sign + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NewMeasurementsSetIcon = (props) => ( ) -// Looks like page with a + sign in it +/** + * An SVG icon that looks like page with a + sign in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NewPatternIcon = (props) => ( ) -// Looks like a newspaper +/** + * An SVG icon that looks like a newspaper + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NewsletterIcon = (props) => ( ) -// Looks like a X +/** + * An SVG icon that looks like the X character + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NoIcon = (props) => ( ) -// Looks like a checkmark +/** + * An SVG icon that looks like a checkmark + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const OkIcon = (props) => ( ) -// Looks like sliders on a mixing panel +/** + * An SVG icon that looks like sliders on a mixing panel + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const OptionsIcon = (props) => ( ) -// Looks like a page with a margin drawn around +/** + * An SVG icon that looks like a page with a margin drawn around + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PageMarginIcon = (props) => ( ( ) -// Looks like a portrait and landscape page stacked +/** + * An SVG icon that looks like a portrait and landscape page stacked + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PageOrientationIcon = (props) => ( @@ -502,7 +1278,19 @@ export const PageOrientationIcon = (props) => ( ) -// Looks like two differently sizes pages stacked +/** + * An SVG icon that looks like two differently sizes pages stacked + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PageSizeIcon = (props) => ( @@ -510,7 +1298,19 @@ export const PageSizeIcon = (props) => ( ) -// Looks like a grid +/** + * An SVG icon that looks like a grid + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PaperlessIcon = (props) => ( @@ -521,77 +1321,209 @@ export const PaperlessIcon = (props) => ( ) -// Looks like a page +/** + * An SVG icon that looks like a page + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PatternIcon = (props) => ( ) -// Looks like a + +/** + * An SVG icon that looks like a + + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PlusIcon = (props) => ( ) -// Looks like a printer +/** + * An SVG icon that looks like a printer + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PrintIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PrivacyIcon = (props) => ( ) -// Looks like the Reddit alian +/** + * An SVG icon that looks like the Reddit alian + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RedditIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ReloadIcon = (props) => ( ) -// Looks like a backspace key +/** + * An SVG icon that looks like a backspace key + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ResetIcon = (props) => ( ) -// Looks like a double rewind arrow +/** + * An SVG icon that looks like a double rewind arrow + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ResetAllIcon = (props) => ( ) -// Looks like a right pointing chevron +/** + * An SVG icon that looks like a right pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RightIcon = (props) => ( ) -// Looks like a rocket +/** + * An SVG icon that looks like a rocket + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RocketIcon = (props) => ( ) -// Looks like two arrows in a circular layout +/** + * An SVG icon that looks like two arrows in a circular layout + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RotateIcon = (props) => ( ( ) -// Looks like the RSS symbol +/** + * An SVG icon that looks like the RSS symbol + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RssIcon = (props) => ( ) -// Looks like a cloud with a plus sign in it +/** + * An SVG icon that looks like a cloud with a plus sign in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SaveIcon = (props) => ( ) -// Looks like a cloud with a plus sign in it +/** + * An SVG icon that looks like a cloud with a plus sign in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SaveAsIcon = (props) => ( ) -// Looks like a small solid circle with a larger dashed circle around it +/** + * An SVG icon that looks like a small solid circle with a larger dashed circle around it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SaIcon = (props) => ( @@ -632,7 +1612,19 @@ export const SaIcon = (props) => ( ) -// Looks like lines of varying thickness +/** + * An SVG icon that looks like lines of varying thickness + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ScaleIcon = (props) => ( @@ -641,14 +1633,38 @@ export const ScaleIcon = (props) => ( ) -// Looks like a magnifying glass +/** + * An SVG icon that looks like a magnifying glass + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SearchIcon = (props) => ( ) -// Looks like a gear +/** + * An SVG icon that looks like a gear/cog + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SettingsIcon = (props) => ( @@ -656,14 +1672,38 @@ export const SettingsIcon = (props) => ( ) -// Looks like a shield +/** + * An SVG icon that looks like a shield + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ShieldIcon = (props) => ( ) -// Looks like a picture camera +/** + * An SVG icon that looks like a picture camera + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ShowcaseIcon = (props) => ( @@ -671,14 +1711,38 @@ export const ShowcaseIcon = (props) => ( ) -// Looks like an exit door +/** + * An SVG icon that looks like an exit door + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SignoutIcon = (props) => ( ) -// Looks like a spinning circle +/** + * An SVG icon that looks like a spinning circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SpinnerIcon = (props) => ( ( ) -// Looks like a white checkbox, intended to be shown on a success-colored background +/** + * An SVG icon that looks like a white checkbox. + * + * This is a specifically styled OkIcon, intended to be shown on a success-colored background + * + * @component + * @param {object} props - All component props + * @param {number} [props.size = 6] - The size (a valid TailwindCSS size number) + * @returns {JSX.Element} + */ export const SuccessIcon = ({ size = 6 }) => ( ) -// Looks like the TikTok t +/** + * An SVG icon that looks like the TikTok t + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TikTokIcon = (props) => ( ) -// Looks like a light bulb +/** + * An SVG icon that looks like a light bulb + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TipIcon = (props) => ( ) -// Looks like a trashcan +/** + * An SVG icon that looks like a trashcan + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TrashIcon = (props) => ( ) -// Looks like the twitch logo +/** + * An SVG icon that looks like the twitch logo + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TwitchIcon = (props) => ( ) -// Looks like a desktop screen +/** + * An SVG icon that looks like a desktop screen + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UiIcon = (props) => ( ) -// Looks like a rewind arrow, but takes text to go inside it +/** + * An SVG icon that looks like a rewind arrow, but takes text to go inside it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UndoIcon = (props) => ( @@ -763,7 +1908,19 @@ export const UndoIcon = (props) => ( ) -// Looks like a bit of measuring tape +/** + * An SVG icon that looks like a bit of measuring tape + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UnitsIcon = (props) => ( @@ -774,7 +1931,19 @@ export const UnitsIcon = (props) => ( ) -// Looks like an up pointing chevron +/** + * An SVG icon that looks like an up pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UpIcon = (props) => ( ( /> ) -// Looks like a cloud with an arrow pointing upwards in it + +/** + * An SVG icon that looks like a cloud with an arrow pointing upwards in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UploadIcon = (props) => ( ) -// Looks like a person's face +/** + * An SVG icon that looks like a person's face + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UserIcon = (props) => ( ) -// Looks like old-timey scales +/** + * An SVG icon that looks like old-timey scales + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UxIcon = (props) => ( ) -// Looks like an ! in a triangle +/** + * An SVG icon that looks like an ! in a triangle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const WarningIcon = (props) => ( ) -// Looks like a wrench +/** + * An SVG icon that looks like a wrench/spanner + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const WrenchIcon = (props) => ( ) -// Looks like a box in dashed lines +/** + * An SVG icon that looks like a box in dashed lines + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const XrayIcon = (props) => ( ) -// Looks like a magnifying glas with a + inside +/** + * An SVG icon that looks like a magnifying glas with a + inside + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ZoomInIcon = (props) => ( ) -// Looks like a magnifying glas with a + inside +/** + * An SVG icon that looks like a magnifying glas with a - inside + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ZoomOutIcon = (props) => ( ) + diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index e892c49456e..3fd34b05c51 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -13,3 +13,4 @@ jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/c jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json +jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json diff --git a/sites/dev/docs/reference/packages/react/components/icon/readme.mdx b/sites/dev/docs/reference/packages/react/components/icon/readme.mdx index 705a97ba855..0b45e4926d7 100644 --- a/sites/dev/docs/reference/packages/react/components/icon/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/icon/readme.mdx @@ -2,6 +2,658 @@ title: Icon --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.icon.mjs' +import { + ApplyIcon, + AsideIcon, + BackIcon, + BeakerIcon, + BookmarkIcon, + BoolNoIcon, + BoolYesIcon, + BulletIcon, + ChatIcon, + CircleIcon, + CisFemaleIcon, + CisMaleIcon, + CloneIcon, + CloseIcon, + CodeIcon, + CompareIcon, + ControlIcon, + CopyIcon, + CoverPageIcon, + CuratedMeasurementsSetIcon, + DesignIcon, + DetailIcon, + DocsIcon, + DownIcon, + DownloadIcon, + EditIcon, + EmailIcon, + ErrorIcon, + ExpandIcon, + ExportIcon, + FailureIcon, + FilterIcon, + FingerprintIcon, + FixmeIcon, + FlagIcon, + FlipIcon, + FreeSewingIcon, + GaugeIcon, + GitHubIcon, + GoogleIcon, + GroupIcon, + HeartIcon, + HelpIcon, + IconWrapper, + IncludeIcon, + InstagramIcon, + KeyIcon, + KioskIcon, + LeftIcon, + LinkIcon, + ListIcon, + LockIcon, + MarginIcon, + MastodonIcon, + MeasurementsIcon, + MeasurementsSetIcon, + MenuIcon, + NewMeasurementsSetIcon, + NewPatternIcon, + NewsletterIcon, + NoIcon, + OkIcon, + OptionsIcon, + PageMarginIcon, + PageOrientationIcon, + PageSizeIcon, + PaperlessIcon, + PatternIcon, + PlusIcon, + PrintIcon, + PrivacyIcon, + RedditIcon, + ReloadIcon, + ResetAllIcon, + ResetIcon, + RightIcon, + RocketIcon, + RotateIcon, + RssIcon, + SaIcon, + SaveAsIcon, + SaveIcon, + ScaleIcon, + SearchIcon, + SettingsIcon, + ShieldIcon, + ShowcaseIcon, + SignoutIcon, + SpinnerIcon, + SuccessIcon, + TikTokIcon, + TipIcon, + TrashIcon, + TwitchIcon, + UiIcon, + UndoIcon, + UnitsIcon, + UpIcon, + UploadIcon, + UserIcon, + UxIcon, + WarningIcon, + WrenchIcon, + XrayIcon, + ZoomInIcon, + ZoomOutIcon, +} from '@freesewing/react/components/Icon' + + + +The __Icon__ component family provides the following components: + +- [ApplyIcon](#applyicon) +- [AsideIcon](#asideicon) +- [BackIcon](#backicon) +- [BeakerIcon](#beakericon) +- [BookmarkIcon](#bookmarkicon) +- [BoolNoIcon](#boolnoicon) +- [BoolYesIcon](#boolyesicon) +- [BulletIcon](#bulleticon) +- [ChatIcon](#chaticon) +- [CircleIcon](#circleicon) +- [CisFemaleIcon](#cisfemaleicon) +- [CisMaleIcon](#cismaleicon) +- [CloneIcon](#cloneicon) +- [CloseIcon](#closeicon) +- [CodeIcon](#codeicon) +- [CompareIcon](#compareicon) +- [ControlIcon](#controlicon) +- [CopyIcon](#copyicon) +- [CoverPageIcon](#coverpageicon) +- [CuratedMeasurementsSetIcon](#curatedmeasurementsseticon) +- [DesignIcon](#designicon) +- [DetailIcon](#detailicon) +- [DocsIcon](#docsicon) +- [DownIcon](#downicon) +- [DownloadIcon](#downloadicon) +- [EditIcon](#editicon) +- [EmailIcon](#emailicon) +- [ErrorIcon](#erroricon) +- [ExpandIcon](#expandicon) +- [ExportIcon](#exporticon) +- [FailureIcon](#failureicon) +- [FilterIcon](#filtericon) +- [FingerprintIcon](#fingerprinticon) +- [FixmeIcon](#fixmeicon) +- [FlagIcon](#flagicon) +- [FlipIcon](#flipicon) +- [FreeSewingIcon](#freesewingicon) +- [GaugeIcon](#gaugeicon) +- [GitHubIcon](#githubicon) +- [GoogleIcon](#googleicon) +- [GroupIcon](#groupicon) +- [HeartIcon](#hearticon) +- [HelpIcon](#helpicon) +- [IconWrapper](#iconwrapper) +- [IncludeIcon](#includeicon) +- [InstagramIcon](#instagramicon) +- [KeyIcon](#keyicon) +- [KioskIcon](#kioskicon) +- [LeftIcon](#lefticon) +- [LinkIcon](#linkicon) +- [ListIcon](#listicon) +- [LockIcon](#lockicon) +- [MarginIcon](#marginicon) +- [MastodonIcon](#mastodonicon) +- [MeasurementsIcon](#measurementsicon) +- [MeasurementsSetIcon](#measurementsseticon) +- [MenuIcon](#menuicon) +- [NewMeasurementsSetIcon](#newmeasurementsseticon) +- [NewPatternIcon](#newpatternicon) +- [NewsletterIcon](#newslettericon) +- [NoIcon](#noicon) +- [OkIcon](#okicon) +- [OptionsIcon](#optionsicon) +- [PageMarginIcon](#pagemarginicon) +- [PageOrientationIcon](#pageorientationicon) +- [PageSizeIcon](#pagesizeicon) +- [PaperlessIcon](#paperlessicon) +- [PatternIcon](#patternicon) +- [PlusIcon](#plusicon) +- [PrintIcon](#printicon) +- [PrivacyIcon](#privacyicon) +- [RedditIcon](#redditicon) +- [ReloadIcon](#reloadicon) +- [ResetAllIcon](#resetallicon) +- [ResetIcon](#reseticon) +- [RightIcon](#righticon) +- [RocketIcon](#rocketicon) +- [RotateIcon](#rotateicon) +- [RssIcon](#rssicon) +- [SaIcon](#saicon) +- [SaveAsIcon](#saveasicon) +- [SaveIcon](#saveicon) +- [ScaleIcon](#scaleicon) +- [SearchIcon](#searchicon) +- [SettingsIcon](#settingsicon) +- [ShieldIcon](#shieldicon) +- [ShowcaseIcon](#showcaseicon) +- [SignoutIcon](#signouticon) +- [SpinnerIcon](#spinnericon) +- [SuccessIcon](#successicon) +- [TikTokIcon](#tiktokicon) +- [TipIcon](#tipicon) +- [TrashIcon](#trashicon) +- [TwitchIcon](#twitchicon) +- [UiIcon](#uiicon) +- [UndoIcon](#undoicon) +- [UnitsIcon](#unitsicon) +- [UpIcon](#upicon) +- [UploadIcon](#uploadicon) +- [UserIcon](#usericon) +- [UxIcon](#uxicon) +- [WarningIcon](#warningicon) +- [WrenchIcon](#wrenchicon) +- [XrayIcon](#xrayicon) +- [ZoomInIcon](#zoominicon) +- [ZoomOutIcon](#zoomouticon) + +#### Visual Overview + +To make it easier to pick an Icon, here is a visual overview: + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +## ApplyIcon + + +## AsideIcon + + +## BackIcon + + +## BeakerIcon + + +## BookmarkIcon + + +## BoolNoIcon + + +## BoolYesIcon + + +## BulletIcon + + +## ChatIcon + + +## CircleIcon + + +## CisFemaleIcon + + +## CisMaleIcon + + +## CloneIcon + + +## CloseIcon + + +## CodeIcon + + +## CompareIcon + + +## ControlIcon + + +## CopyIcon + + +## CoverPageIcon + + +## CuratedMeasurementsSetIcon + + +## DesignIcon + + +## DetailIcon + + +## DocsIcon + + +## DownIcon + + +## DownloadIcon + + +## EditIcon + + +## EmailIcon + + +## ErrorIcon + + +## ExpandIcon + + +## ExportIcon + + +## FailureIcon + + +## FilterIcon + + +## FingerprintIcon + + +## FixmeIcon + + +## FlagIcon + + +## FlipIcon + + +## FreeSewingIcon + + +## GaugeIcon + + +## GitHubIcon + + +## GoogleIcon + + +## GroupIcon + + +## HeartIcon + + +## HelpIcon + + +## IconWrapper + + +## IncludeIcon + + +## InstagramIcon + + +## KeyIcon + + +## KioskIcon + + +## LeftIcon + + +## LinkIcon + + +## ListIcon + + +## LockIcon + + +## MarginIcon + + +## MastodonIcon + + +## MeasurementsIcon + + +## MeasurementsSetIcon + + +## MenuIcon + + +## NewMeasurementsSetIcon + + +## NewPatternIcon + + +## NewsletterIcon + + +## NoIcon + + +## OkIcon + + +## OptionsIcon + + +## PageMarginIcon + + +## PageOrientationIcon + + +## PageSizeIcon + + +## PaperlessIcon + + +## PatternIcon + + +## PlusIcon + + +## PrintIcon + + +## PrivacyIcon + + +## RedditIcon + + +## ReloadIcon + + +## ResetAllIcon + + +## ResetIcon + + +## RightIcon + + +## RocketIcon + + +## RotateIcon + + +## RssIcon + + +## SaIcon + + +## SaveAsIcon + + +## SaveIcon + + +## ScaleIcon + + +## SearchIcon + + +## SettingsIcon + + +## ShieldIcon + + +## ShowcaseIcon + + +## SignoutIcon + + +## SpinnerIcon + + +## SuccessIcon + + +## TikTokIcon + + +## TipIcon + + +## TrashIcon + + +## TwitchIcon + + +## UiIcon + + +## UndoIcon + + +## UnitsIcon + + +## UpIcon + + +## UploadIcon + + +## UserIcon + + +## UxIcon + + +## WarningIcon + + +## WrenchIcon + + +## XrayIcon + + +## ZoomInIcon + + +## ZoomOutIcon + + + diff --git a/sites/dev/src/components/component-docs.js b/sites/dev/src/components/component-docs.js index 00512c6cdd3..c9146c716d2 100644 --- a/sites/dev/src/components/component-docs.js +++ b/sites/dev/src/components/component-docs.js @@ -41,7 +41,7 @@ export const ComponentDocs = ({ docs, example }) => { > on{' '} - line + line{' '} {docs.line} {' '} in {docs.file}