Skip to content

Commit

Permalink
Merge pull request #90 from perimetre/7.9.0
Browse files Browse the repository at this point in the history
feat: added align/justify icons
  • Loading branch information
AssisrMatheus authored Sep 19, 2022
2 parents 6073ac6 + 2307425 commit 75c67ee
Show file tree
Hide file tree
Showing 12 changed files with 268 additions and 1 deletion.
14 changes: 14 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
21 changes: 21 additions & 0 deletions src/components/Icons/Singletone/AlignObjectsCenter.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
21 changes: 21 additions & 0 deletions src/components/Icons/Singletone/AlignObjectsLeft.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
21 changes: 21 additions & 0 deletions src/components/Icons/Singletone/AlignObjectsRight.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
28 changes: 28 additions & 0 deletions src/components/Icons/Singletone/JustifyObjectsBottom.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
21 changes: 21 additions & 0 deletions src/components/Icons/Singletone/JustifyObjectsCenter.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
26 changes: 26 additions & 0 deletions src/components/Icons/Singletone/JustifyObjectsTop.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
33 changes: 33 additions & 0 deletions src/components/Icons/Singletone/JustifySpaceAround.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
28 changes: 28 additions & 0 deletions src/components/Icons/Singletone/JustifySpaceBetween.tsx
Original file line number Diff line number Diff line change
@@ -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')`;
Loading

0 comments on commit 75c67ee

Please sign in to comment.