import React from 'react' import { logoPath } from '@freesewing/config' // Used in several icons 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' /** * 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', stroke = 2, children = null, fill = false, fillOpacity = 1, dasharray = null, }) => ( {children} ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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 }) => ( ) /** * 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 }) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( {props.label ? ( {props.label} ) : null} ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * An SVG icon that looks like arrows pointing inwards * * @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 CompactIcon = (props) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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 }) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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 }) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( {props.text ? ( {props.text} ) : null} ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( ) /** * 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) => ( )