diff --git a/CHANGELOG.md b/CHANGELOG.md index 7238019..a69e9d1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +## [7.9.0] 2022-09-19 + +### Added + +- Added `AlignObjectsCenter` Icon +- Added `AlignObjectsLeft` Icon +- Added `AlignObjectsRight` Icon +- Added `JustifyObjectsBottom` Icon +- Added `JustifyObjectsCenter` Icon +- Added `JustifyObjectsTop` Icon +- Added `JustifySpaceAround` Icon +- Added `JustifySpaceBetween` Icon +- Added `JustifySpaceEvenly` Icon + ## [7.8.0] 2022-09-15 ### Added diff --git a/package.json b/package.json index cf613f7..8a39ef4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@perimetre/ui", "description": "A component library made by @perimetre", - "version": "7.8.0", + "version": "7.9.0", "repository": { "type": "git", "url": "git+https://github.com/perimetre/ui.git" diff --git a/src/components/Icons/Singletone/AlignObjectsCenter.tsx b/src/components/Icons/Singletone/AlignObjectsCenter.tsx new file mode 100644 index 0000000..e38c8a3 --- /dev/null +++ b/src/components/Icons/Singletone/AlignObjectsCenter.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * AlignObjectsCenter icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const AlignObjectsCenterIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="15" height="16" viewBox="0 0 15 16" {...props} className={classnames('fill-current', className)}> + <rect x="6" width="3" height="16" rx="1.5" /> + <rect x="15" y="4" width="3" height="15" rx="1.5" transform="rotate(90 15 4)" /> + <rect x="12" y="9" width="3" height="9" rx="1.5" transform="rotate(90 12 9)" /> + </svg> +); + +/** + * AlignObjectsCenter icon to use with CSS + */ +export const AlignObjectsCenterIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2216%22%20viewBox%3D%220%200%2015%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%226%22%20width%3D%223%22%20height%3D%2216%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%224%22%20width%3D%223%22%20height%3D%2215%22%20rx%3D%221.5%22%20transform%3D%22rotate(90%2015%204)%22%2F%3E%3Crect%20x%3D%2212%22%20y%3D%229%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221.5%22%20transform%3D%22rotate(90%2012%209)%22%2F%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/AlignObjectsLeft.tsx b/src/components/Icons/Singletone/AlignObjectsLeft.tsx new file mode 100644 index 0000000..fdaeabb --- /dev/null +++ b/src/components/Icons/Singletone/AlignObjectsLeft.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * AlignObjectsLeft icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const AlignObjectsLeftIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="17" height="14" viewBox="0 0 17 14" {...props} className={classnames('fill-current', className)}> + <rect width="3" height="14" rx="1.5" /> + <rect x="16.0063" y="2" width="3" height="12" rx="1.5" transform="rotate(90 16.0063 2)" /> + <rect x="12.0063" y="9" width="3" height="8" rx="1.5" transform="rotate(90 12.0063 9)" /> + </svg> +); + +/** + * AlignObjectsLeft icon to use with CSS + */ +export const AlignObjectsLeftIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2214%22%20viewBox%3D%220%200%2017%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%223%22%20height%3D%2214%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2216.0063%22%20y%3D%222%22%20width%3D%223%22%20height%3D%2212%22%20rx%3D%221.5%22%20transform%3D%22rotate(90%2016.0063%202)%22%2F%3E%3Crect%20x%3D%2212.0063%22%20y%3D%229%22%20width%3D%223%22%20height%3D%228%22%20rx%3D%221.5%22%20transform%3D%22rotate(90%2012.0063%209)%22%2F%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/AlignObjectsRight.tsx b/src/components/Icons/Singletone/AlignObjectsRight.tsx new file mode 100644 index 0000000..e77856a --- /dev/null +++ b/src/components/Icons/Singletone/AlignObjectsRight.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * AlignObjectsRight icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const AlignObjectsRightIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="17" height="14" viewBox="0 0 17 14" {...props} className={classnames('fill-current', className)}> + <rect width="3" height="14" rx="1.5" transform="matrix(-1 0 0 1 16.0063 0)" /> + <rect width="3" height="12" rx="1.5" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0 2)" /> + <rect width="3" height="8" rx="1.5" transform="matrix(4.37114e-08 1 1 -4.37114e-08 4 9)" /> + </svg> +); + +/** + * AlignObjectsRight icon to use with CSS + */ +export const AlignObjectsRightIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2214%22%20viewBox%3D%220%200%2017%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%223%22%20height%3D%2214%22%20rx%3D%221.5%22%20transform%3D%22matrix(-1%200%200%201%2016.0063%200)%22%2F%3E%3Crect%20width%3D%223%22%20height%3D%2212%22%20rx%3D%221.5%22%20transform%3D%22matrix(4.37114e-08%201%201%20-4.37114e-08%200%202)%22%2F%3E%3Crect%20width%3D%223%22%20height%3D%228%22%20rx%3D%221.5%22%20transform%3D%22matrix(4.37114e-08%201%201%20-4.37114e-08%204%209)%22%2F%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/JustifyObjectsBottom.tsx b/src/components/Icons/Singletone/JustifyObjectsBottom.tsx new file mode 100644 index 0000000..fd54880 --- /dev/null +++ b/src/components/Icons/Singletone/JustifyObjectsBottom.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * JustifyObjectsBottom icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const JustifyObjectsBottomIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="15" height="17" viewBox="0 0 15 17" {...props} className={classnames('fill-current', className)}> + <rect + x="0.00341797" + y="16.0034" + width="2.99881" + height="14" + rx="1.49941" + transform="rotate(-90 0.00341797 16.0034)" + /> + <rect x="2.00342" y="0.00341797" width="3" height="11.9952" rx="1.5" /> + <rect x="9.00342" y="4.00195" width="3" height="7.99683" rx="1.5" /> + </svg> +); + +/** + * JustifyObjectsBottom icon to use with CSS + */ +export const JustifyObjectsBottomIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2217%22%20viewBox%3D%220%200%2015%2017%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.00341797%22%20y%3D%2216.0034%22%20width%3D%222.99881%22%20height%3D%2214%22%20rx%3D%221.49941%22%20transform%3D%22rotate(-90%200.00341797%2016.0034)%22%2F%3E%3Crect%20x%3D%222.00342%22%20y%3D%220.00341797%22%20width%3D%223%22%20height%3D%2211.9952%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%229.00342%22%20y%3D%224.00195%22%20width%3D%223%22%20height%3D%227.99683%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/JustifyObjectsCenter.tsx b/src/components/Icons/Singletone/JustifyObjectsCenter.tsx new file mode 100644 index 0000000..1ceaecc --- /dev/null +++ b/src/components/Icons/Singletone/JustifyObjectsCenter.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * JustifyObjectsCenter icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const JustifyObjectsCenterIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="16" height="15" viewBox="0 0 16 15" {...props} className={classnames('fill-current', className)}> + <rect y="9" width="3" height="16" rx="1.5" transform="rotate(-90 0 9)" /> + <rect x="4" width="3" height="15" rx="1.5" /> + <rect x="9" y="3" width="3" height="9" rx="1.5" /> + </svg> +); + +/** + * JustifyObjectsCenter icon to use with CSS + */ +export const JustifyObjectsCenterIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2015%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20y%3D%229%22%20width%3D%223%22%20height%3D%2216%22%20rx%3D%221.5%22%20transform%3D%22rotate(-90%200%209)%22%2F%3E%3Crect%20x%3D%224%22%20width%3D%223%22%20height%3D%2215%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%223%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/JustifyObjectsTop.tsx b/src/components/Icons/Singletone/JustifyObjectsTop.tsx new file mode 100644 index 0000000..5c3e679 --- /dev/null +++ b/src/components/Icons/Singletone/JustifyObjectsTop.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * JustifyObjectsTop icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const JustifyObjectsTopIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="15" height="17" viewBox="0 0 15 17" {...props} className={classnames('fill-current', className)}> + <rect + width="2.99881" + height="14" + rx="1.49941" + transform="matrix(4.37114e-08 1 1 -4.37114e-08 0.00341797 0.00341797)" + /> + <rect width="3" height="11.9952" rx="1.5" transform="matrix(1 -8.74054e-08 -8.74401e-08 -1 2.00342 16.0034)" /> + <rect width="3" height="7.99683" rx="1.5" transform="matrix(1 -8.74054e-08 -8.74401e-08 -1 9.00342 12.0049)" /> + </svg> +); + +/** + * JustifyObjectsTop icon to use with CSS + */ +export const JustifyObjectsTopIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2217%22%20viewBox%3D%220%200%2015%2017%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%222.99881%22%20height%3D%2214%22%20rx%3D%221.49941%22%20transform%3D%22matrix(4.37114e-08%201%201%20-4.37114e-08%200.00341797%200.00341797)%22%2F%3E%3Crect%20width%3D%223%22%20height%3D%2211.9952%22%20rx%3D%221.5%22%20transform%3D%22matrix(1%20-8.74054e-08%20-8.74401e-08%20-1%202.00342%2016.0034)%22%2F%3E%3Crect%20width%3D%223%22%20height%3D%227.99683%22%20rx%3D%221.5%22%20transform%3D%22matrix(1%20-8.74054e-08%20-8.74401e-08%20-1%209.00342%2012.0049)%22%2F%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/JustifySpaceAround.tsx b/src/components/Icons/Singletone/JustifySpaceAround.tsx new file mode 100644 index 0000000..aed2bcd --- /dev/null +++ b/src/components/Icons/Singletone/JustifySpaceAround.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * JustifySpaceAround icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const JustifySpaceAroundIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="16" height="14" viewBox="0 0 16 14" {...props} className={classnames('fill-current', className)}> + <rect width="2.59" height="13.9" rx="1.295" transform="matrix(-1 0 0 1 9.1582 0)" /> + <g clipPath="url(#prefix_BmZZd_clip0_708_51)"> + <path d="M4.82944 8.44949L5.96971 7.30922C6.11818 7.16075 6.11818 6.91963 5.96971 6.77116L4.82944 5.63089C4.68097 5.48241 4.43985 5.48241 4.29137 5.63089C4.1429 5.77936 4.1429 6.02048 4.29137 6.16895L4.78312 6.66069H1.29697L1.78872 6.16895C1.93719 6.02048 1.93719 5.77936 1.78872 5.63089C1.64024 5.48241 1.39912 5.48241 1.25065 5.63089L0.110378 6.77116C-0.0380948 6.91963 -0.0380948 7.16075 0.110378 7.30922L1.25065 8.44949C1.39912 8.59797 1.64024 8.59797 1.78872 8.44949C1.93719 8.30102 1.93719 8.0599 1.78872 7.91143L1.29816 7.42087H4.7843L4.29256 7.91262C4.14409 8.06109 4.14409 8.30221 4.29256 8.45068C4.44103 8.59916 4.68215 8.59916 4.83063 8.45068L4.82944 8.44949Z" /> + </g> + <g clipPath="url(#prefix_BmZZd_clip1_708_51)"> + <path d="M14.7479 8.44949L15.8882 7.30922C16.0366 7.16075 16.0366 6.91963 15.8882 6.77116L14.7479 5.63089C14.5994 5.48241 14.3583 5.48241 14.2098 5.63089C14.0614 5.77936 14.0614 6.02048 14.2098 6.16895L14.7016 6.66069H11.2154L11.7072 6.16895C11.8556 6.02048 11.8556 5.77936 11.7072 5.63089C11.5587 5.48241 11.3176 5.48241 11.1691 5.63089L10.0288 6.77116C9.88036 6.91963 9.88036 7.16075 10.0288 7.30922L11.1691 8.44949C11.3176 8.59797 11.5587 8.59797 11.7072 8.44949C11.8556 8.30102 11.8556 8.0599 11.7072 7.91143L11.2166 7.42087H14.7028L14.211 7.91262C14.0625 8.06109 14.0625 8.30221 14.211 8.45068C14.3595 8.59916 14.6006 8.59916 14.7491 8.45068L14.7479 8.44949Z" /> + </g> + <defs> + <clipPath id="prefix_BmZZd_clip0_708_51"> + <rect width="6.08145" height="6.08145" transform="translate(0 4)" /> + </clipPath> + <clipPath id="prefix_BmZZd_clip1_708_51"> + <rect width="6.08145" height="6.08145" transform="translate(9.91846 4)" /> + </clipPath> + </defs> + </svg> +); + +/** + * JustifySpaceAround icon to use with CSS + */ +export const JustifySpaceAroundIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20viewBox%3D%220%200%2016%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%222.59%22%20height%3D%2213.9%22%20rx%3D%221.295%22%20transform%3D%22matrix(-1%200%200%201%209.1582%200)%22%2F%3E%3Cg%20clip-path%3D%22url(%23prefix_cLcEP_clip0_708_51)%22%3E%3Cpath%20d%3D%22M4.82944%208.44949L5.96971%207.30922C6.11818%207.16075%206.11818%206.91963%205.96971%206.77116L4.82944%205.63089C4.68097%205.48241%204.43985%205.48241%204.29137%205.63089C4.1429%205.77936%204.1429%206.02048%204.29137%206.16895L4.78312%206.66069H1.29697L1.78872%206.16895C1.93719%206.02048%201.93719%205.77936%201.78872%205.63089C1.64024%205.48241%201.39912%205.48241%201.25065%205.63089L0.110378%206.77116C-0.0380948%206.91963%20-0.0380948%207.16075%200.110378%207.30922L1.25065%208.44949C1.39912%208.59797%201.64024%208.59797%201.78872%208.44949C1.93719%208.30102%201.93719%208.0599%201.78872%207.91143L1.29816%207.42087H4.7843L4.29256%207.91262C4.14409%208.06109%204.14409%208.30221%204.29256%208.45068C4.44103%208.59916%204.68215%208.59916%204.83063%208.45068L4.82944%208.44949Z%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23prefix_cLcEP_clip1_708_51)%22%3E%3Cpath%20d%3D%22M14.7479%208.44949L15.8882%207.30922C16.0366%207.16075%2016.0366%206.91963%2015.8882%206.77116L14.7479%205.63089C14.5994%205.48241%2014.3583%205.48241%2014.2098%205.63089C14.0614%205.77936%2014.0614%206.02048%2014.2098%206.16895L14.7016%206.66069H11.2154L11.7072%206.16895C11.8556%206.02048%2011.8556%205.77936%2011.7072%205.63089C11.5587%205.48241%2011.3176%205.48241%2011.1691%205.63089L10.0288%206.77116C9.88036%206.91963%209.88036%207.16075%2010.0288%207.30922L11.1691%208.44949C11.3176%208.59797%2011.5587%208.59797%2011.7072%208.44949C11.8556%208.30102%2011.8556%208.0599%2011.7072%207.91143L11.2166%207.42087H14.7028L14.211%207.91262C14.0625%208.06109%2014.0625%208.30221%2014.211%208.45068C14.3595%208.59916%2014.6006%208.59916%2014.7491%208.45068L14.7479%208.44949Z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix_cLcEP_clip0_708_51%22%3E%3Crect%20width%3D%226.08145%22%20height%3D%226.08145%22%20transform%3D%22translate(0%204)%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22prefix_cLcEP_clip1_708_51%22%3E%3Crect%20width%3D%226.08145%22%20height%3D%226.08145%22%20transform%3D%22translate(9.91846%204)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/JustifySpaceBetween.tsx b/src/components/Icons/Singletone/JustifySpaceBetween.tsx new file mode 100644 index 0000000..dc7e2d5 --- /dev/null +++ b/src/components/Icons/Singletone/JustifySpaceBetween.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * JustifySpaceBetween icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const JustifySpaceBetweenIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="17" height="14" viewBox="0 0 17 14" {...props} className={classnames('fill-current', className)}> + <rect width="2.92432" height="13.6468" rx="1.46216" transform="matrix(-1 0 0 1 16.5859 0)" /> + <rect width="2.92432" height="13.6468" rx="1.46216" transform="matrix(-1 0 0 1 3.51025 0)" /> + <g clipPath="url(#prefix_AyOfn_clip0_708_36)"> + <path d="M11.268 8.7252L13.0043 6.98888C13.2304 6.76279 13.2304 6.39564 13.0043 6.16955L11.268 4.43323C11.0419 4.20715 10.6747 4.20715 10.4487 4.43323C10.2226 4.65932 10.2226 5.02648 10.4487 5.25256L11.1974 6.00135H5.88902L6.6378 5.25256C6.86389 5.02648 6.86389 4.65932 6.6378 4.43323C6.41172 4.20715 6.04456 4.20715 5.81848 4.43323L4.08216 6.16955C3.85608 6.39564 3.85608 6.76279 4.08216 6.98888L5.81848 8.7252C6.04456 8.95128 6.41172 8.95128 6.6378 8.7252C6.86389 8.49911 6.86389 8.13195 6.6378 7.90587L5.89083 7.15889H11.1993L10.4505 7.90768C10.2244 8.13376 10.2244 8.50092 10.4505 8.727C10.6766 8.95309 11.0437 8.95309 11.2698 8.727L11.268 8.7252Z" /> + </g> + <defs> + <clipPath id="prefix_AyOfn_clip0_708_36"> + <rect width="9.26035" height="9.26035" transform="translate(3.91406 1.94971)" /> + </clipPath> + </defs> + </svg> +); + +/** + * JustifySpaceBetween icon to use with CSS + */ +export const JustifySpaceBetweenIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2214%22%20viewBox%3D%220%200%2017%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%222.92432%22%20height%3D%2213.6468%22%20rx%3D%221.46216%22%20transform%3D%22matrix(-1%200%200%201%2016.5859%200)%22%2F%3E%3Crect%20width%3D%222.92432%22%20height%3D%2213.6468%22%20rx%3D%221.46216%22%20transform%3D%22matrix(-1%200%200%201%203.51025%200)%22%2F%3E%3Cg%20clip-path%3D%22url(%23prefix_uE3K4_clip0_708_36)%22%3E%3Cpath%20d%3D%22M11.268%208.7252L13.0043%206.98888C13.2304%206.76279%2013.2304%206.39564%2013.0043%206.16955L11.268%204.43323C11.0419%204.20715%2010.6747%204.20715%2010.4487%204.43323C10.2226%204.65932%2010.2226%205.02648%2010.4487%205.25256L11.1974%206.00135H5.88902L6.6378%205.25256C6.86389%205.02648%206.86389%204.65932%206.6378%204.43323C6.41172%204.20715%206.04456%204.20715%205.81848%204.43323L4.08216%206.16955C3.85608%206.39564%203.85608%206.76279%204.08216%206.98888L5.81848%208.7252C6.04456%208.95128%206.41172%208.95128%206.6378%208.7252C6.86389%208.49911%206.86389%208.13195%206.6378%207.90587L5.89083%207.15889H11.1993L10.4505%207.90768C10.2244%208.13376%2010.2244%208.50092%2010.4505%208.727C10.6766%208.95309%2011.0437%208.95309%2011.2698%208.727L11.268%208.7252Z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix_uE3K4_clip0_708_36%22%3E%3Crect%20width%3D%229.26035%22%20height%3D%229.26035%22%20transform%3D%22translate(3.91406%201.94971)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/Singletone/JustifySpaceEvenly.tsx b/src/components/Icons/Singletone/JustifySpaceEvenly.tsx new file mode 100644 index 0000000..3cf0238 --- /dev/null +++ b/src/components/Icons/Singletone/JustifySpaceEvenly.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import classnames from 'classnames'; + +/** + * JustifySpaceEvenly icon to use with JSX + * + * @param props the icon props + * @param props.className the icon classname value + */ +export const JustifySpaceEvenlyIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => ( + <svg width="16" height="14" viewBox="0 0 16 14" {...props} className={classnames('fill-current', className)}> + <rect width="2.59" height="13.9" rx="1.295" transform="matrix(-1 0 0 1 9.1582 0)" /> + <g clipPath="url(#prefix_kLx8u_clip0_708_51)"> + <path d="M4.82944 5.44949L5.96971 4.30922C6.11818 4.16075 6.11818 3.91963 5.96971 3.77116L4.82944 2.63089C4.68097 2.48241 4.43985 2.48241 4.29137 2.63089C4.1429 2.77936 4.1429 3.02048 4.29137 3.16895L4.78312 3.66069H1.29697L1.78872 3.16895C1.93719 3.02048 1.93719 2.77936 1.78872 2.63089C1.64024 2.48241 1.39912 2.48241 1.25065 2.63089L0.110378 3.77116C-0.0380948 3.91963 -0.0380948 4.16075 0.110378 4.30922L1.25065 5.44949C1.39912 5.59797 1.64024 5.59797 1.78872 5.44949C1.93719 5.30102 1.93719 5.0599 1.78872 4.91143L1.29816 4.42087H4.7843L4.29256 4.91262C4.14409 5.06109 4.14409 5.30221 4.29256 5.45068C4.44103 5.59916 4.68215 5.59916 4.83063 5.45068L4.82944 5.44949Z" /> + </g> + <g clipPath="url(#prefix_kLx8u_clip1_708_51)"> + <path d="M4.82944 10.4495L5.96971 9.30922C6.11818 9.16075 6.11818 8.91963 5.96971 8.77116L4.82944 7.63089C4.68097 7.48241 4.43985 7.48241 4.29137 7.63089C4.1429 7.77936 4.1429 8.02048 4.29137 8.16895L4.78312 8.66069H1.29697L1.78872 8.16895C1.93719 8.02048 1.93719 7.77936 1.78872 7.63089C1.64024 7.48241 1.39912 7.48241 1.25065 7.63089L0.110378 8.77116C-0.0380948 8.91963 -0.0380948 9.16075 0.110378 9.30922L1.25065 10.4495C1.39912 10.598 1.64024 10.598 1.78872 10.4495C1.93719 10.301 1.93719 10.0599 1.78872 9.91143L1.29816 9.42087H4.7843L4.29256 9.91262C4.14409 10.0611 4.14409 10.3022 4.29256 10.4507C4.44103 10.5992 4.68215 10.5992 4.83063 10.4507L4.82944 10.4495Z" /> + </g> + <g clipPath="url(#prefix_kLx8u_clip2_708_51)"> + <path d="M14.7479 5.44949L15.8882 4.30922C16.0366 4.16075 16.0366 3.91963 15.8882 3.77116L14.7479 2.63089C14.5994 2.48241 14.3583 2.48241 14.2098 2.63089C14.0614 2.77936 14.0614 3.02048 14.2098 3.16895L14.7016 3.66069H11.2154L11.7072 3.16895C11.8556 3.02048 11.8556 2.77936 11.7072 2.63089C11.5587 2.48241 11.3176 2.48241 11.1691 2.63089L10.0288 3.77116C9.88036 3.91963 9.88036 4.16075 10.0288 4.30922L11.1691 5.44949C11.3176 5.59797 11.5587 5.59797 11.7072 5.44949C11.8556 5.30102 11.8556 5.0599 11.7072 4.91143L11.2166 4.42087H14.7028L14.211 4.91262C14.0625 5.06109 14.0625 5.30221 14.211 5.45068C14.3595 5.59916 14.6006 5.59916 14.7491 5.45068L14.7479 5.44949Z" /> + </g> + <g clipPath="url(#prefix_kLx8u_clip3_708_51)"> + <path d="M14.7479 10.4495L15.8882 9.30922C16.0366 9.16075 16.0366 8.91963 15.8882 8.77116L14.7479 7.63089C14.5994 7.48241 14.3583 7.48241 14.2098 7.63089C14.0614 7.77936 14.0614 8.02048 14.2098 8.16895L14.7016 8.66069H11.2154L11.7072 8.16895C11.8556 8.02048 11.8556 7.77936 11.7072 7.63089C11.5587 7.48241 11.3176 7.48241 11.1691 7.63089L10.0288 8.77116C9.88036 8.91963 9.88036 9.16075 10.0288 9.30922L11.1691 10.4495C11.3176 10.598 11.5587 10.598 11.7072 10.4495C11.8556 10.301 11.8556 10.0599 11.7072 9.91143L11.2166 9.42087H14.7028L14.211 9.91262C14.0625 10.0611 14.0625 10.3022 14.211 10.4507C14.3595 10.5992 14.6006 10.5992 14.7491 10.4507L14.7479 10.4495Z" /> + </g> + <defs> + <clipPath id="prefix_kLx8u_clip0_708_51"> + <rect width="6.08145" height="6.08145" transform="translate(0 1)" /> + </clipPath> + <clipPath id="prefix_kLx8u_clip1_708_51"> + <rect width="6.08145" height="6.08145" transform="translate(0 6)" /> + </clipPath> + <clipPath id="prefix_kLx8u_clip2_708_51"> + <rect width="6.08145" height="6.08145" transform="translate(9.91846 1)" /> + </clipPath> + <clipPath id="prefix_kLx8u_clip3_708_51"> + <rect width="6.08145" height="6.08145" transform="translate(9.91846 6)" /> + </clipPath> + </defs> + </svg> +); + +/** + * JustifySpaceEvenly icon to use with CSS + */ +export const JustifySpaceEvenlyIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2214%22%20viewBox%3D%220%200%2016%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%222.59%22%20height%3D%2213.9%22%20rx%3D%221.295%22%20transform%3D%22matrix(-1%200%200%201%209.1582%200)%22%2F%3E%3Cg%20clip-path%3D%22url(%23prefix_SzcFq_clip0_708_51)%22%3E%3Cpath%20d%3D%22M4.82944%205.44949L5.96971%204.30922C6.11818%204.16075%206.11818%203.91963%205.96971%203.77116L4.82944%202.63089C4.68097%202.48241%204.43985%202.48241%204.29137%202.63089C4.1429%202.77936%204.1429%203.02048%204.29137%203.16895L4.78312%203.66069H1.29697L1.78872%203.16895C1.93719%203.02048%201.93719%202.77936%201.78872%202.63089C1.64024%202.48241%201.39912%202.48241%201.25065%202.63089L0.110378%203.77116C-0.0380948%203.91963%20-0.0380948%204.16075%200.110378%204.30922L1.25065%205.44949C1.39912%205.59797%201.64024%205.59797%201.78872%205.44949C1.93719%205.30102%201.93719%205.0599%201.78872%204.91143L1.29816%204.42087H4.7843L4.29256%204.91262C4.14409%205.06109%204.14409%205.30221%204.29256%205.45068C4.44103%205.59916%204.68215%205.59916%204.83063%205.45068L4.82944%205.44949Z%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23prefix_SzcFq_clip1_708_51)%22%3E%3Cpath%20d%3D%22M4.82944%2010.4495L5.96971%209.30922C6.11818%209.16075%206.11818%208.91963%205.96971%208.77116L4.82944%207.63089C4.68097%207.48241%204.43985%207.48241%204.29137%207.63089C4.1429%207.77936%204.1429%208.02048%204.29137%208.16895L4.78312%208.66069H1.29697L1.78872%208.16895C1.93719%208.02048%201.93719%207.77936%201.78872%207.63089C1.64024%207.48241%201.39912%207.48241%201.25065%207.63089L0.110378%208.77116C-0.0380948%208.91963%20-0.0380948%209.16075%200.110378%209.30922L1.25065%2010.4495C1.39912%2010.598%201.64024%2010.598%201.78872%2010.4495C1.93719%2010.301%201.93719%2010.0599%201.78872%209.91143L1.29816%209.42087H4.7843L4.29256%209.91262C4.14409%2010.0611%204.14409%2010.3022%204.29256%2010.4507C4.44103%2010.5992%204.68215%2010.5992%204.83063%2010.4507L4.82944%2010.4495Z%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23prefix_SzcFq_clip2_708_51)%22%3E%3Cpath%20d%3D%22M14.7479%205.44949L15.8882%204.30922C16.0366%204.16075%2016.0366%203.91963%2015.8882%203.77116L14.7479%202.63089C14.5994%202.48241%2014.3583%202.48241%2014.2098%202.63089C14.0614%202.77936%2014.0614%203.02048%2014.2098%203.16895L14.7016%203.66069H11.2154L11.7072%203.16895C11.8556%203.02048%2011.8556%202.77936%2011.7072%202.63089C11.5587%202.48241%2011.3176%202.48241%2011.1691%202.63089L10.0288%203.77116C9.88036%203.91963%209.88036%204.16075%2010.0288%204.30922L11.1691%205.44949C11.3176%205.59797%2011.5587%205.59797%2011.7072%205.44949C11.8556%205.30102%2011.8556%205.0599%2011.7072%204.91143L11.2166%204.42087H14.7028L14.211%204.91262C14.0625%205.06109%2014.0625%205.30221%2014.211%205.45068C14.3595%205.59916%2014.6006%205.59916%2014.7491%205.45068L14.7479%205.44949Z%22%2F%3E%3C%2Fg%3E%3Cg%20clip-path%3D%22url(%23prefix_SzcFq_clip3_708_51)%22%3E%3Cpath%20d%3D%22M14.7479%2010.4495L15.8882%209.30922C16.0366%209.16075%2016.0366%208.91963%2015.8882%208.77116L14.7479%207.63089C14.5994%207.48241%2014.3583%207.48241%2014.2098%207.63089C14.0614%207.77936%2014.0614%208.02048%2014.2098%208.16895L14.7016%208.66069H11.2154L11.7072%208.16895C11.8556%208.02048%2011.8556%207.77936%2011.7072%207.63089C11.5587%207.48241%2011.3176%207.48241%2011.1691%207.63089L10.0288%208.77116C9.88036%208.91963%209.88036%209.16075%2010.0288%209.30922L11.1691%2010.4495C11.3176%2010.598%2011.5587%2010.598%2011.7072%2010.4495C11.8556%2010.301%2011.8556%2010.0599%2011.7072%209.91143L11.2166%209.42087H14.7028L14.211%209.91262C14.0625%2010.0611%2014.0625%2010.3022%2014.211%2010.4507C14.3595%2010.5992%2014.6006%2010.5992%2014.7491%2010.4507L14.7479%2010.4495Z%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22prefix_SzcFq_clip0_708_51%22%3E%3Crect%20width%3D%226.08145%22%20height%3D%226.08145%22%20transform%3D%22translate(0%201)%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22prefix_SzcFq_clip1_708_51%22%3E%3Crect%20width%3D%226.08145%22%20height%3D%226.08145%22%20transform%3D%22translate(0%206)%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22prefix_SzcFq_clip2_708_51%22%3E%3Crect%20width%3D%226.08145%22%20height%3D%226.08145%22%20transform%3D%22translate(9.91846%201)%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22prefix_SzcFq_clip3_708_51%22%3E%3Crect%20width%3D%226.08145%22%20height%3D%226.08145%22%20transform%3D%22translate(9.91846%206)%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E')`; diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx index 5a122d0..09d26cc 100644 --- a/src/components/Icons/index.tsx +++ b/src/components/Icons/index.tsx @@ -12,3 +12,12 @@ export * from './Singletone/StarIcon'; export * from './Singletone/ArrowIcon'; export * from './Singletone/CalendarIcon'; export * from './Singletone/TagsIcon'; +export * from './Singletone/AlignObjectsRight'; +export * from './Singletone/AlignObjectsLeft'; +export * from './Singletone/AlignObjectsCenter'; +export * from './Singletone/JustifyObjectsCenter'; +export * from './Singletone/JustifyObjectsTop'; +export * from './Singletone/JustifyObjectsBottom'; +export * from './Singletone/JustifySpaceBetween'; +export * from './Singletone/JustifySpaceAround'; +export * from './Singletone/JustifySpaceEvenly';