@eleventheye/asui 1.0.0

package/src/icons/TimeLapseIcon.tsx

@@ -0,0 +1,36 @@
+import { IconProps } from 'icons/Icons.types';
+import { IconContainer } from 'icons/styles';
+import React from 'react';
+
+const TimeLapseIcon: React.FC<IconProps> = ({
+  className = '',
+  size = 24,
+  color = '#fffff0',
+  fillColor = 'transparent',
+  fillOpacity = 1,
+  circleStrokeColor = '#fffff0',
+}) => {
+  return (
+    <IconContainer className={className}>
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          fill={fillColor}
+          fillOpacity={fillOpacity}
+          cx="12"
+          cy="12"
+          r="10.5"
+          stroke={circleStrokeColor}
+          strokeWidth={'1.5px'}
+        />
+        <path
+          d="M11.9 16.1c-1.2 0-2.2-.5-3-1.2l3-3V7.7c2.3 0 4.2 1.9 4.2 4.2 0 2.3-1.9 4.2-4.2 4.2Zm6.6-4.2c0 3.6-3 6.6-6.6 6.6s-6.6-3-6.6-6.6 3-6.6 6.6-6.6 6.6 3 6.6 6.6Zm-1.2 0c0 3-2.4 5.4-5.4 5.4s-5.4-2.4-5.4-5.4 2.4-5.4 5.4-5.4 5.4 2.4 5.4 5.4Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill={color}
+        />
+      </svg>
+    </IconContainer>
+  );
+};
+
+export default TimeLapseIcon;

package/src/icons/UnlockIcon.tsx

@@ -0,0 +1,38 @@
+import { IconProps } from 'icons/Icons.types.js';
+import { IconContainer } from 'icons/styles';
+import React from 'react';
+
+const UnlockIcon: React.FC<IconProps> = ({
+  className = '',
+  size = 24,
+  color = '#fffff0',
+  fillColor = 'transparent',
+  fillOpacity = 1,
+  circleStrokeColor = '#fffff0',
+}) => {
+  return (
+    <IconContainer className={className}>
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          fill={fillColor}
+          fillOpacity={fillOpacity}
+          cx="12"
+          cy="12"
+          r="10.5"
+          stroke={circleStrokeColor}
+          strokeWidth={'1.5px'}
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="nonzero"
+          d="M15.75 11.7c.369 0 .675.306.675.675v4.05c0 .369-.306.675-.675.675h-8.1c-.369 0-.675-.306-.675-.675v-4.05c0-.369.306-.675.675-.675h8.1Zm.675-3.375c0-2.232-1.818-4.05-4.05-4.05s-4.05 1.818-4.05 4.05V10.35H7.65c-1.125 0-2.025.9-2.025 2.025v4.05c0 1.125.9 2.025 2.025 2.025h8.1c1.125 0 2.025-.9 2.025-2.025v-4.05c0-1.125-.9-2.025-2.025-2.025H9.675V8.325c0-1.494 1.206-2.7 2.7-2.7s2.7 1.206 2.7 2.7h1.35Z"
+          fill={color}
+          stroke={color}
+          strokeWidth={'0.2px'}
+        />
+      </svg>
+    </IconContainer>
+  );
+};
+
+export default UnlockIcon;

package/src/icons/UserSettingsIcon.tsx

@@ -0,0 +1,34 @@
+import { IconProps } from 'icons/Icons.types';
+import { IconContainer } from 'icons/styles';
+import React from 'react';
+
+const UserSettingsIcon: React.FC<IconProps> = ({
+  className = '',
+  size = 24,
+  color = '#fffff0',
+  fillColor = 'transparent',
+  fillOpacity = 1,
+  circleStrokeColor = '#fffff0',
+}) => {
+  return (
+    <IconContainer className={className}>
+      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
+        <circle
+          fill={fillColor}
+          fillOpacity={fillOpacity}
+          cx="12"
+          cy="12"
+          r="10.5"
+          stroke={circleStrokeColor}
+          strokeWidth={'1.5px'}
+        />
+        <path
+          d="M9.7 11.6c-.4 0-.8.2-.8.6-.1 1.5 0 3 0 4.5 1.1.6 2.3 1.2 3.4 1.7 1.1-.5 2.2-1.1 3.2-1.7 0-1.3 0-2.6 0-3.9 0-.4 0-1.1-.7-1.2-1.6 0-3.4 0-5.1 0Zm2.4-5.9C10.8 5.6 10 7.1 10.7 8s2.3.8 2.8-.2c.7-1-.2-2.3-1.4-2.3Zm.1-1.6c1.6 0 3 1.1 3.2 2.5.4 1.6-1.1 3.4-2.9 3.4.6 0 1.3 0 1.9 0 1.3-.1 2.6.7 2.7 1.9 0 1.3 0 2.6 0 3.9.3-.2.5-.3.8-.5 0-1.7 0-3.5 0-5.3.5 0 1.1 0 1.6 0 0 1.9 0 4 0 6-2.5 1.3-5 2.5-7.4 3.8-2.5-1.2-4.9-2.5-7.4-3.8 0-1.9 0-4 0-6 .5 0 1.1 0 1.7 0 0 1.7 0 3.5 0 5.3.3.1.5.3.8.5 0-1.1 0-2.2 0-3.2-.1-1.1.7-2.3 1.9-2.5.9-.1 1.8-.1 2.8-.1-1.6-.2-2.9-1.4-3-2.7-.2-1.7 1.4-3.4 3.3-3.3Z"
+          fill={color}
+        />
+      </svg>
+    </IconContainer>
+  );
+};
+
+export default UserSettingsIcon;

package/src/icons/index.ts

@@ -0,0 +1,53 @@
+export * from './AddItemIcon';
+export { default as AddItemIcon } from './AddItemIcon';
+
+export * from './AddUserIcon';
+export { default as AddUserIcon } from './AddUserIcon';
+
+export * from './CheckIcon';
+export { default as CheckIcon } from './CheckIcon';
+
+export * from './CloseIcon';
+export { default as CloseIcon } from './CloseIcon';
+
+export * from './DeleteIcon';
+export { default as DeleteIcon } from './DeleteIcon';
+
+export * from './EyeIcon';
+export { default as EyeIcon } from './EyeIcon';
+
+export * from './EyeSlashIcon';
+export { default as EyeSlashIcon } from './EyeSlashIcon';
+
+export * from './GamesIcon';
+export { default as GamesIcon } from './GamesIcon';
+
+export * from './GearUserIcon';
+export { default as GearUserIcon } from './GearUserIcon';
+
+export * from './HexagonIcon';
+export { default as HexagonIcon } from './HexagonIcon';
+
+export * from './HomeIcon';
+export { default as HomeIcon } from './HomeIcon';
+
+export * from './LockIcon';
+export { default as LockIcon } from './LockIcon';
+
+export * from './PenIcon';
+export { default as PenIcon } from './PenIcon';
+
+export * from './RulerIcon';
+export { default as RulerIcon } from './RulerIcon';
+
+export * from './SaveIcon';
+export { default as SaveIcon } from './SaveIcon';
+
+export * from './TimeLapseIcon';
+export { default as TimeLapseIcon } from './TimeLapseIcon';
+
+export * from './UnlockIcon';
+export { default as UnlockIcon } from './UnlockIcon';
+
+export * from './UserSettingsIcon';
+export { default as UserSettingsIcon } from './UserSettingsIcon';

package/src/icons/styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const IconContainer = styled.div`
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+`;

package/src/index.ts

@@ -0,0 +1,19 @@
+export { default as AddItemIcon } from './icons/AddItemIcon.js';
+export { default as AddUserIcon } from './icons/AddUserIcon.js';
+export { default as CheckIcon } from './icons/CheckIcon.js';
+export { default as CloseIcon } from './icons/CloseIcon.js';
+export { default as DeleteIcon } from './icons/DeleteIcon.js';
+export { default as EyeIcon } from './icons/EyeIcon.js';
+export { default as EyeSlashIcon } from './icons/EyeSlashIcon.js';
+export { default as GamesIcon } from './icons/GamesIcon.js';
+export { default as GearUserIcon } from './icons/GearUserIcon.js';
+export { default as HexagonIcon } from './icons/HexagonIcon.js';
+export { default as HomeIcon } from './icons/HomeIcon.js';
+export * from './icons/Icons.types.js';
+export { default as LockIcon } from './icons/LockIcon.js';
+export { default as PenIcon } from './icons/PenIcon.js';
+export { default as RulerIcon } from './icons/RulerIcon.js';
+export { default as SaveIcon } from './icons/SaveIcon.js';
+export { default as TimeLapseIcon } from './icons/TimeLapseIcon.js';
+export { default as UnlockIcon } from './icons/UnlockIcon.js';
+export { default as UserSettingsIcon } from './icons/UserSettingsIcon.js';