Add arrows icons

qasimali09 · May 1, 2023 · b456b77 · b456b77 · vercel · May 1, 2023
1 parent ba0817b
commit b456b77
Show file tree

Hide file tree

Showing 73 changed files with 4,140 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-modern-icons",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "React Modern Icons is a set of modern icons for React",
   "repository": {
     "type": "git",

diff --git a/src/icons/arrows/AltArrowDown.js b/src/icons/arrows/AltArrowDown.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function AltArrowDown({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M19 9L12 15L5 9"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M12.3704 15.8351L18.8001 9.20467C19.2013 8.79094 18.9581 8 18.4297 8H5.5703C5.04189 8 4.79869 8.79094 5.1999 9.20467L11.6296 15.8351C11.8427 16.0549 12.1573 16.0549 12.3704 15.8351Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(AltArrowDown);
+
+AltArrowDown.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+AltArrowDown.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};
diff --git a/src/icons/arrows/AltArrowLeft.js b/src/icons/arrows/AltArrowLeft.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function AltArrowLeft({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M15 5L9 12L15 19"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M8.16485 11.6296L14.7953 5.1999C15.2091 4.79869 16 5.04189 16 5.5703L16 18.4297C16 18.9581 15.2091 19.2013 14.7953 18.8001L8.16485 12.3704C7.94505 12.1573 7.94505 11.8427 8.16485 11.6296Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(AltArrowLeft);
+
+AltArrowLeft.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+AltArrowLeft.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};
diff --git a/src/icons/arrows/AltArrowRight.js b/src/icons/arrows/AltArrowRight.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function AltArrowRight({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M9 5L15 12L9 19"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M15.8351 11.6296L9.20467 5.1999C8.79094 4.79869 8 5.04189 8 5.5703L8 18.4297C8 18.9581 8.79094 19.2013 9.20467 18.8001L15.8351 12.3704C16.055 12.1573 16.0549 11.8427 15.8351 11.6296Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(AltArrowRight);
+
+AltArrowRight.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+AltArrowRight.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};
diff --git a/src/icons/arrows/AltArrowUp.js b/src/icons/arrows/AltArrowUp.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function AltArrowUp({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M19 15L12 9L5 15"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M12.3704 8.16485L18.8001 14.7953C19.2013 15.2091 18.9581 16 18.4297 16H5.5703C5.04189 16 4.79869 15.2091 5.1999 14.7953L11.6296 8.16485C11.8427 7.94505 12.1573 7.94505 12.3704 8.16485Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(AltArrowUp);
+
+AltArrowUp.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+AltArrowUp.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};
diff --git a/src/icons/arrows/ArrowDown.js b/src/icons/arrows/ArrowDown.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function ArrowDown({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M12 4L12 20M12 20L18 14M12 20L6 14"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M12.75 4C12.75 3.58579 12.4142 3.25 12 3.25C11.5858 3.25 11.25 3.58579 11.25 4L11.25 13.25H6.00002C5.69668 13.25 5.4232 13.4327 5.30711 13.713C5.19103 13.9932 5.25519 14.3158 5.46969 14.5303L11.4697 20.5303C11.6103 20.671 11.8011 20.75 12 20.75C12.1989 20.75 12.3897 20.671 12.5304 20.5303L18.5304 14.5303C18.7449 14.3158 18.809 13.9932 18.6929 13.713C18.5768 13.4327 18.3034 13.25 18 13.25H12.75L12.75 4Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(ArrowDown);
+
+ArrowDown.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+ArrowDown.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};
diff --git a/src/icons/arrows/ArrowLeft.js b/src/icons/arrows/ArrowLeft.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function ArrowLeft({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M20 12H4M4 12L10 6M4 12L10 18"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M20 11.25C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H10.75L10.75 18C10.75 18.3034 10.5673 18.5768 10.287 18.6929C10.0068 18.809 9.68417 18.7449 9.46967 18.5304L3.46967 12.5304C3.32902 12.3897 3.25 12.1989 3.25 12C3.25 11.8011 3.32902 11.6103 3.46967 11.4697L9.46967 5.46969C9.68417 5.25519 10.0068 5.19103 10.287 5.30711C10.5673 5.4232 10.75 5.69668 10.75 6.00002L10.75 11.25H20Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(ArrowLeft);
+
+ArrowLeft.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+ArrowLeft.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};
diff --git a/src/icons/arrows/ArrowLeftDown.js b/src/icons/arrows/ArrowLeftDown.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import generateIcon from '../utils/generateIcon';
+
+function ArrowLeftDown({ color, strokeWidth, variant }) {
+  const defaultIcon = () => (
+    <g>
+      <path
+        d="M18 6L6 18M6 18L6 9M6 18L15 18"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  );
+
+  const filledIcon = () => (
+    <g>
+      <path
+        d="M18.5303 6.53033C18.8232 6.23744 18.8232 5.76256 18.5303 5.46967C18.2374 5.17678 17.7626 5.17678 17.4697 5.46967L10.5 12.4393L6.53033 8.46967C6.31583 8.25517 5.99324 8.191 5.71299 8.30709C5.43273 8.42318 5.25 8.69665 5.25 9V18C5.25 18.4142 5.58579 18.75 6 18.75L15 18.75C15.3033 18.75 15.5768 18.5673 15.6929 18.287C15.809 18.0068 15.7448 17.6842 15.5303 17.4697L11.5607 13.5L18.5303 6.53033Z"
+        fill={color}
+      />
+    </g>
+  );
+
+  switch (variant) {
+    case 'light':
+      return defaultIcon();
+    case 'regular':
+      return defaultIcon();
+    case 'bold':
+      return defaultIcon();
+    case 'filled':
+      return filledIcon();
+    default:
+      return defaultIcon();
+  }
+}
+
+export default generateIcon(ArrowLeftDown);
+
+ArrowLeftDown.propTypes = {
+  color: PropTypes.string,
+  strokeWidth: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'regular', 'bold', 'filled']),
+};
+
+ArrowLeftDown.defaultProps = {
+  color: 'currentColor',
+  strokeWidth: '1.5px',
+  variant: 'regular',
+};