norma-library 0.4.1 → 0.4.3

package/src/components/icon/defaultIcon.tsx

@@ -0,0 +1,82 @@
+import React, { FunctionComponent } from 'react';
+import { colors } from '../../helpers';
+import { IconsProps } from './types';
+import { defaultIcons } from './default';
+import { IconsContainer } from './styles';
+
+export type IconScale =
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge'
+  | '2xlarge'
+  | '3xlarge';
+export type Colors =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'error'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'white'
+  | 'black';
+
+const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  '2xlarge': 36,
+  '3xlarge': 40,
+};
+
+const IconsBase: FunctionComponent<IconsProps> = ({
+  icon,
+  scale = '3xlarge',
+  color = 'inherit',
+  width = 0,
+  height = 0,
+  ...props
+}: IconsProps) => {
+  let newWidth = 24;
+  let newHeight = 24;
+
+  if (scale) {
+    width = scaleSize[scale];
+    height = scaleSize[scale];
+  }
+
+  if (width > 0 && height > 0) {
+    newWidth = width;
+    newHeight = height;
+  }
+
+  const newFill = colors[color];
+
+  const iconElement = defaultIcons[icon];
+
+  return (
+    <IconsContainer
+      viewBox="0 0 20 20"
+      width={`${newWidth}px`}
+      height={`${newHeight}px`}
+      fill={newFill}
+      {...props}
+    >
+      {iconElement && React.cloneElement(iconElement, { fill: newFill })}
+    </IconsContainer>
+  );
+};
+
+IconsBase.defaultProps = {
+  icon: 'user',
+  scale: '3xlarge',
+  color: 'inherit',
+};
+
+export const Icons: FunctionComponent<IconsProps> = (props: IconsProps) => (
+  <IconsBase {...props} />
+);

package/src/components/icon/icon.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react"
+import type { StoryDefault, Story } from '@ladle/react'
+import { Icons as DefaultIconSVG } from './defaultIcon'
+import { Icons as NormaIconSVG } from './normaIcon'
+import { Card } from '../card/card'
+
+export default {
+  title: 'Data / Icons',
+  meta: {
+    key: 'icon',
+  },
+} satisfies StoryDefault
+
+export const IconsDefault: Story = () => (
+  <div className="App">
+    <Card>
+      <DefaultIconSVG icon={'user'} scale="xsmall" />
+      <DefaultIconSVG icon={'user'} scale="small" color="secondary" />
+      <DefaultIconSVG icon={'user'} scale="medium" color="error" />
+      <DefaultIconSVG icon={'user'} scale="large" color="warning" />
+      <DefaultIconSVG icon={'user'} scale="xlarge" color="success" />
+      <DefaultIconSVG icon={'user'} scale="2xlarge" color="black" />
+      <DefaultIconSVG icon={'user'} scale="3xlarge" color="primary" />
+    </Card>
+  </div>
+)
+
+IconsDefault.storyName = 'Icon Default'
+
+export const IconsNorma: Story = () => (
+  <div className="App">
+    <Card>
+      <NormaIconSVG icon={'envelopeMail'} scale="xsmall" />
+      <NormaIconSVG icon={'envelopeMail'} scale="small" color="secondary" />
+      <NormaIconSVG icon={'envelopeMail'} scale="medium" color="error" />
+      <NormaIconSVG icon={'envelopeMail'} scale="large" color="warning" />
+      <NormaIconSVG icon={'envelopeMail'} scale="xlarge" color="success" />
+      <NormaIconSVG icon={'envelopeMail'} scale="2xlarge" color="black" />
+      <NormaIconSVG icon={'envelopeMail'} scale="3xlarge" color="primary" />
+    </Card>
+  </div>
+)
+
+IconsNorma.storyName = 'Icon Norma'

package/src/components/icon/icons-ia.tsx

@@ -0,0 +1,107 @@
+export const bag =
+  '<>\r\n  <g id="bag" transform="translate(10 10)">\r\n    <g id="Icon_feather-briefcase" data-name="Icon feather-briefcase">\r\n      <path id="Caminho_1939" data-name="Caminho 1939" d="M26.407,10.5H213.667a23.407,23.407,0,0,1,23.407,23.407V150.944a23.407,23.407,0,0,1-23.407,23.407H26.407A23.407,23.407,0,0,1,3,150.944V33.907A23.407,23.407,0,0,1,26.407,10.5Z" transform="translate(-3 36.315)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      <path id="Caminho_1940" data-name="Caminho 1940" d="M105.63,215.167V27.907A23.407,23.407,0,0,0,82.222,4.5H35.407A23.407,23.407,0,0,0,12,27.907V215.167" transform="translate(58.222 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    </g>\r\n  </g>\r\n</>'
+export const box =
+  '<>\r\n  <g id="box" transform="translate(10.595 10)">\r\n    <path id="Caminho_1932" data-name="Caminho 1932" d="M213.11,162.945V71.536a22.8,22.8,0,0,0-11.589-19.767l-81.126-45.7a23.466,23.466,0,0,0-23.179,0l-81.126,45.7A22.8,22.8,0,0,0,4.5,71.536v91.409a22.8,22.8,0,0,0,11.589,19.767l81.126,45.7a23.466,23.466,0,0,0,23.179,0l81.126-45.7A22.8,22.8,0,0,0,213.11,162.945Z" transform="translate(-4.5 -3.003)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1933" data-name="Caminho 1933" d="M4.905,10.44,106.214,66.471,207.524,10.44" transform="translate(-1.909 46.752)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1934" data-name="Caminho 1934" d="M18,129.84V18" transform="translate(86.305 99.545)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const card =
+  '<>\r\n  <g id="card" transform="translate(10 10)">\r\n    <g id="Icon_feather-credit-card" data-name="Icon feather-credit-card">\r\n      <path id="Caminho_1937" data-name="Caminho 1937" d="M22.875,6H215.249a21.375,21.375,0,0,1,21.375,21.375V155.624A21.375,21.375,0,0,1,215.249,177H22.875A21.375,21.375,0,0,1,1.5,155.624V27.375A21.375,21.375,0,0,1,22.875,6Z" transform="translate(-1.5 -6)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      <path id="Caminho_1938" data-name="Caminho 1938" d="M1.5,15H236.623" transform="translate(-1.5 49.125)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    </g>\r\n  </g>\r\n</>'
+export const chart_bars =
+  '<>\r\n  <path id="Icon_metro-chart-bars" data-name="Icon metro-chart-bars" d="M2.571,179.245H254.877v31.538H2.571Zm31.538-63.077H65.647v47.307H34.109ZM81.416,53.092h31.538V163.476H81.416ZM128.724,100.4h31.538v63.077H128.724ZM176.031,5.784H207.57V163.476H176.031Z" transform="translate(-2.571 -5.784)" fill="#333"/>\r\n</>'
+export const circle_chart =
+  '<>\r\n  <g id="circle_chart" transform="translate(10.077 10)">\r\n    <g id="Icon_feather-pie-chart" data-name="Icon feather-pie-chart">\r\n      <path id="Caminho_1660" data-name="Caminho 1660" d="M218.838,150.977A112.353,112.353,0,1,1,70.421,4.245" transform="translate(-2.999 5.087)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      <path id="Caminho_1661" data-name="Caminho 1661" d="M130.434,115.434A112.434,112.434,0,0,0,18,3V115.434Z" transform="translate(94.288 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    </g>\r\n  </g>\r\n</>'
+export const circle_check =
+  '<>\r\n  <g id="circle_check" transform="translate(10.023 10.135)">\r\n    <g id="Icon" transform="translate(-66.52 -47.533)">\r\n      <g id="Icon_feather-check-circle" data-name="Icon feather-check-circle" transform="translate(66.52 47.533)">\r\n        <path id="Caminho_1935" data-name="Caminho 1935" d="M233.813,107.851v10.617A115.406,115.406,0,1,1,165.377,12.988" transform="translate(-3 -2.991)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n        <path id="Caminho_1936" data-name="Caminho 1936" d="M163.528,6,48.122,121.522,13.5,86.9" transform="translate(67.285 17.153)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</>'
+export const circle_help =
+  '<>\r\n  <g id="circle_help" transform="translate(10 10)">\r\n    <path id="Caminho_1657" data-name="Caminho 1657" d="M226.333,114.667A111.667,111.667,0,1,1,114.667,3,111.667,111.667,0,0,1,226.333,114.667Z" transform="translate(-3 -3)" fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1658" data-name="Caminho 1658" d="M13.635,38.476A41.875,41.875,0,0,1,95.012,52.434c0,27.917-41.875,41.875-41.875,41.875" transform="translate(57.393 39.304)" fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1659" data-name="Caminho 1659" d="M18,25.5h0" transform="translate(93.667 142)" fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const circle_not =
+  '<>\r\n  <g id="Icon" transform="translate(-46.329 -45.793)">\r\n    <path id="Icon_material-block" data-name="Icon material-block" d="M129.169,3C59.524,3,3,58.748,3,127.437S59.524,251.874,129.169,251.874s126.169-55.748,126.169-124.437S198.814,3,129.169,3ZM28.234,127.437c0-55,45.169-99.549,100.935-99.549a100.587,100.587,0,0,1,61.823,21.03L49.556,188.411A97.482,97.482,0,0,1,28.234,127.437Zm100.935,99.549a100.587,100.587,0,0,1-61.823-21.03L208.782,66.463A97.482,97.482,0,0,1,230.1,127.437C230.1,182.438,184.936,226.986,129.169,226.986Z" transform="translate(43.329 42.793)" fill="#333"/>\r\n  </g>\r\n</>'
+export const circle_timer =
+  '<>\r\n  <path id="Caminho_1968" data-name="Caminho 1968" d="M126.771,249.6A122.836,122.836,0,0,1,41.525,38.331a9.86,9.86,0,0,1,13.7,14.187A103.086,103.086,0,1,0,136.6,24.144V62.59a9.888,9.888,0,1,1-19.776,0V13.826a9.882,9.882,0,0,1,9.888-9.888,122.833,122.833,0,0,1,.061,245.667Z" transform="translate(-3.938 -3.938)" fill="#333"/>\r\n  <path id="Caminho_1969" data-name="Caminho 1969" d="M21.13,12.419,83.067,56.926a18.742,18.742,0,0,1-21.787,30.5,18.1,18.1,0,0,1-4.357-4.357L12.416,21.134a6.245,6.245,0,0,1,8.715-8.715Z" transform="translate(70.911 70.913)" fill="#333"/>\r\n</>'
+export const comment =
+  '<>\r\n  <path id="ic_chat_24px" d="M232.4,2H27.6A25.566,25.566,0,0,0,2.128,27.6L2,258l51.2-51.2H232.4A25.675,25.675,0,0,0,258,181.2V27.6A25.675,25.675,0,0,0,232.4,2ZM53.2,91.6H206.8v25.6H53.2Zm102.4,64H53.2V130H155.6Zm51.2-76.8H53.2V53.2H206.8Z" transform="translate(-2 -2)" fill="#333"/>\r\n</>'
+export const edit =
+  '<>\r\n  <g id="edit" transform="translate(10 10)">\r\n    <path id="Caminho_1946" data-name="Caminho 1946" d="M99.584,6H24.463A21.463,21.463,0,0,0,3,27.463V177.705a21.463,21.463,0,0,0,21.463,21.463H174.705a21.463,21.463,0,0,0,21.463-21.463V102.584" transform="translate(-3 16.765)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1947" data-name="Caminho 1947" d="M124.681,9.486A22.765,22.765,0,0,1,156.876,41.68L54.926,143.63,12,154.362l10.732-42.926Z" transform="translate(52.389 -2.818)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const envelop =
+  '<>\r\n  <path id="ic_email_24px" d="M232.4,4H27.6A25.566,25.566,0,0,0,2.128,29.6L2,183.2a25.675,25.675,0,0,0,25.6,25.6H232.4A25.675,25.675,0,0,0,258,183.2V29.6A25.675,25.675,0,0,0,232.4,4Zm0,51.2L130,119.2,27.6,55.2V29.6L130,93.6l102.4-64Z" transform="translate(-2 -4)" fill="#333"/>\r\n</>'
+export const eye =
+  '<>\r\n  <g id="eye" transform="translate(10 10)">\r\n    <path id="Caminho_1948" data-name="Caminho 1948" d="M1.5,84.908S40.954,6,110,6,218.5,84.908,218.5,84.908,179.043,163.816,110,163.816,1.5,84.908,1.5,84.908Z" transform="translate(-1.5 -6)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1949" data-name="Caminho 1949" d="M72.681,43.09A29.59,29.59,0,1,1,43.09,13.5,29.59,29.59,0,0,1,72.681,43.09Z" transform="translate(65.408 35.817)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const female =
+  '<>\r\n  <g id="female" transform="translate(10 10)">\r\n    <path id="female-svgrepo-com" d="M32.481,194.111h76.444M70.7,130.407V232.333m0-101.926A63.7,63.7,0,1,0,7,66.7,63.7,63.7,0,0,0,70.7,130.407Z" transform="translate(-7 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const filter_list =
+  '<>\r\n  <path id="Icon_material-filter-list" data-name="Icon material-filter-list" d="M100.757,174.012h55v-27.5h-55ZM4.5,9V36.5H252.018V9Zm41.253,96.257H210.765v-27.5H45.753Z" transform="translate(-4.5 -9)" fill="#333"/>\r\n</>'
+export const grid =
+  '<>\r\n  <g id="grid" transform="translate(10 10)">\r\n    <path id="Caminho_1664" data-name="Caminho 1664" d="M4.5,4.5H74.781V74.781H4.5Z" transform="translate(-4.5 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1665" data-name="Caminho 1665" d="M21,4.5H91.281V74.781H21Z" transform="translate(103.719 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1666" data-name="Caminho 1666" d="M21,21H91.281V91.281H21Z" transform="translate(103.719 103.719)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1667" data-name="Caminho 1667" d="M4.5,21H74.781V91.281H4.5Z" transform="translate(-4.5 103.719)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const hand =
+  '<>\r\n  <path id="Icon_ionic-md-hand" data-name="Icon ionic-md-hand" d="M228.4,137.569c-8.172-8.168-20.2-8.9-28.374-.735l-23.358,23.345c-6.081,6.072-13.409,6.085-17.686,1.038-2.834-3.344-1.715-13.657-.921-20.2l11.715-96.292c1.046-8.6-5.082-16.913-13.689-17.959s-16.43,5.569-17.477,14.17l-12.922,75.631c-.675,1.882-2.124,2.207-2.287-.326l-4.4-98.3a15.7,15.7,0,0,0-31.395,0L87.3,116.978c.082,1.143-.9,1.47-1.076.165L72.261,39.835c-1.541-8.528-9.707-14.682-18.238-13.141S39.826,36.884,41.365,45.41L53.8,135.878c.013,1.609-.527,2.529-1.293.466l-18.552-49.6c-2.9-8.165-11.877-12.924-20.046-10.024S1.47,89.083,4.371,97.247L36.894,203.5c.17.586.35,1.168.534,1.747l.068.219c.006.017.014.033.02.049a69.19,69.19,0,0,0,65.795,47.763,93.618,93.618,0,0,0,55.672-18.867h0c16.8-10.114,70.641-67.994,70.641-67.994C237.8,158.246,236.577,145.739,228.4,137.569Z" transform="translate(-3.462 -2.25)" fill="#333"/>\r\n</>'
+export const headphone =
+  '<>\r\n  <g id="headphone" transform="translate(10 10)">\r\n    <g id="Icon" transform="translate(-7.004 -13)">\r\n      <g id="Icon_feather-headphones" data-name="Icon feather-headphones" transform="translate(7.004 13)">\r\n        <path id="Caminho_1930" data-name="Caminho 1930" d="M4.5,215.111V130.866C4.5,61.076,56.509,4.5,120.665,4.5S236.829,61.076,236.829,130.866v84.244" transform="translate(-4.5 -4.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n        <path id="Caminho_1931" data-name="Caminho 1931" d="M236.829,57.2c0,8-11.557,14.479-25.814,14.479H198.108c-14.257,0-25.814-6.483-25.814-14.479V35.479c0-8,11.557-14.479,25.814-14.479h38.722ZM4.5,57.2c0,8,11.557,14.479,25.814,14.479H43.222c14.257,0,25.814-6.483,25.814-14.479V35.479c0-8-11.558-14.479-25.814-14.479H4.5Z" transform="translate(-4.5 160.652)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</>'
+export const list_ul =
+  '<>\r\n  <path id="Icon_awesome-list-ul" data-name="Icon awesome-list-ul" d="M22.806,3.375A22.806,22.806,0,1,0,45.612,26.181,22.806,22.806,0,0,0,22.806,3.375Zm0,76.02A22.806,22.806,0,1,0,45.612,102.2,22.806,22.806,0,0,0,22.806,79.395Zm0,76.02A22.806,22.806,0,1,0,45.612,178.22a22.806,22.806,0,0,0-22.806-22.806Zm212.855,7.6H83.621a7.6,7.6,0,0,0-7.6,7.6v15.2a7.6,7.6,0,0,0,7.6,7.6H235.66a7.6,7.6,0,0,0,7.6-7.6v-15.2A7.6,7.6,0,0,0,235.66,163.016Zm0-152.039H83.621a7.6,7.6,0,0,0-7.6,7.6v15.2a7.6,7.6,0,0,0,7.6,7.6H235.66a7.6,7.6,0,0,0,7.6-7.6v-15.2A7.6,7.6,0,0,0,235.66,10.977Zm0,76.019H83.621a7.6,7.6,0,0,0-7.6,7.6v15.2a7.6,7.6,0,0,0,7.6,7.6H235.66a7.6,7.6,0,0,0,7.6-7.6V94.6A7.6,7.6,0,0,0,235.66,87Z" transform="translate(0 -3.375)" fill="#333"/>\r\n</>'
+export const logo_live =
+  '<>\r\n  <text id="olos.live" transform="translate(75 43)" font-size="46" font-family="Ubuntu"><tspan x="0" y="0">olos.</tspan><tspan y="0" font-family="Ubuntu-Bold, Ubuntu" font-weight="700">live</tspan></text>\r\n  <g id="Grupo_474" data-name="Grupo 474">\r\n    <rect id="Retângulo_1912" data-name="Retângulo 1912" width="56" height="56" transform="translate(0)" fill="#fff"/>\r\n    <g id="cloud" transform="translate(0 7)">\r\n      <path id="cloud-2" data-name="cloud" d="M36,44.79q.308.009.619.009A20.4,20.4,0,1,0,20.694,11.65h-3.1a16.575,16.575,0,0,0,0,33.149h17.85Q35.724,44.8,36,44.79Zm4.981-5.8c5.993-1.96,10.938-7.751,10.938-14.588a15.3,15.3,0,0,0-30.6,0h-5.1A20.342,20.342,0,0,1,17.7,16.75h-.109a11.475,11.475,0,0,0,0,22.95h17.85A27.272,27.272,0,0,0,40.982,38.988Z" transform="translate(-1.019 -4)" fill="#fc7f11" fill-rule="evenodd"/>\r\n    </g>\r\n  </g>\r\n</>'
+export const logo_olos =
+  '<>\r\n  <g id="Grupo_1879" data-name="Grupo 1879" transform="translate(-0.001 0.01)">\r\n    <rect id="Retângulo_2535" data-name="Retângulo 2535" width="5.45" height="5.45" transform="translate(230.961 25.794) rotate(90)" fill="none" stroke="#e3e4e8" stroke-miterlimit="10" stroke-width="1"/>\r\n    <path id="Caminho_1999" data-name="Caminho 1999" d="M78.978,36.873H60.447A10.246,10.246,0,0,1,50.21,26.636V18.6A10.246,10.246,0,0,1,60.447,8.36H78.978A10.246,10.246,0,0,1,89.215,18.6v8.039A10.246,10.246,0,0,1,78.978,36.873ZM59.833,13.81A4.187,4.187,0,0,0,55.643,18v9.249a4.187,4.187,0,0,0,4.19,4.19H79.574a4.187,4.187,0,0,0,4.19-4.19V18a4.187,4.187,0,0,0-4.19-4.19H59.833Z" transform="translate(35.31 5.886)" fill="#ff7f11"/>\r\n    <path id="Caminho_2000" data-name="Caminho 2000" d="M109.408,36.873H84.421a9.149,9.149,0,0,1-9.351-8.908V8.36h5.45v20.2a3.106,3.106,0,0,0,3.3,2.861h25.583v5.45Z" transform="translate(52.793 5.886)" fill="#ff7f11"/>\r\n    <path id="Caminho_2001" data-name="Caminho 2001" d="M125.218,36.873H106.687A10.246,10.246,0,0,1,96.45,26.636V18.6A10.246,10.246,0,0,1,106.687,8.36h18.531A10.246,10.246,0,0,1,135.455,18.6v8.039A10.246,10.246,0,0,1,125.218,36.873ZM106.073,13.81a4.187,4.187,0,0,0-4.19,4.19v9.249a4.187,4.187,0,0,0,4.19,4.19h19.741a4.187,4.187,0,0,0,4.19-4.19V18a4.187,4.187,0,0,0-4.19-4.19H106.073Z" transform="translate(67.828 5.886)" fill="#ff7f11"/>\r\n    <g id="Grupo_1879-2" data-name="Grupo 1879" transform="translate(0.001 -0.01)">\r\n      <path id="Caminho_2002" data-name="Caminho 2002" d="M50.614,24.6c.051,5.178-5.28,10.509-11.5,11.65-5.791,1.073-10-1.976-9.743-6.609.238-4.514,4.633-9.3,10.151-10.884,5.91-1.7,11.037.8,11.088,5.842Z" transform="translate(20.648 12.835)" fill="#ff7f11"/>\r\n      <path id="Caminho_2003" data-name="Caminho 2003" d="M29.413,12.083c.2-3.713,4.19-8.448,9.164-10.782,5.28-2.47,9.828-1.38,9.845,2.674.017,4.156-4.718,9.436-10.237,11.565-5.178,1.993-8.976.358-8.772-3.458Z" transform="translate(20.677 0.01)" fill="#ff7f11"/>\r\n      <path id="Caminho_2004" data-name="Caminho 2004" d="M27.627,14.362c4.1-3.475,9.436-4.377,11.872-1.771,2.572,2.742.8,8.125-3.9,11.718-4.514,3.458-9.709,3.713-11.684.852C22.024,22.436,23.659,17.7,27.627,14.362Z" transform="translate(16.263 7.814)" fill="#ff7f11"/>\r\n      <path id="Caminho_2005" data-name="Caminho 2005" d="M33.475,27.807c-.273,4.548-4.531,9.078-9.2,9.93-4.394.818-7.392-1.976-6.949-6.1.426-4.02,4.037-8.159,8.278-9.385C30.1,20.96,33.747,23.361,33.475,27.807Z" transform="translate(12.153 15.421)" fill="#ff7f11"/>\r\n      <path id="Caminho_2006" data-name="Caminho 2006" d="M10.355,32.1c-.562,3.662-3.509,7.137-6.421,7.665C1.157,40.28-.495,37.9.135,34.523c.613-3.3,3.219-6.558,5.944-7.341,2.861-.818,4.837,1.329,4.292,4.905Z" transform="translate(-0.001 19.01)" fill="#ff7f11"/>\r\n      <path id="Caminho_2007" data-name="Caminho 2007" d="M22.691,8.784c3.577-3.3,8.09-4.428,10.049-2.35,2.061,2.2.443,6.949-3.594,10.39-3.866,3.321-8.278,3.935-9.879,1.6-1.533-2.231-.034-6.472,3.424-9.657Z" transform="translate(13.126 3.803)" fill="#ff7f11"/>\r\n      <path id="Caminho_2008" data-name="Caminho 2008" d="M24.808.726c3.134-.238,4.037,2.691,1.874,6.523-2.146,3.8-6.353,6.762-9.249,6.643-2.742-.119-3.321-3-1.4-6.455C17.961,3.962,21.845.964,24.808.743Z" transform="translate(10.481 0.517)" fill="#ff7f11"/>\r\n      <path id="Caminho_2009" data-name="Caminho 2009" d="M13.791,47.692c-3.049-1.857-3.577-6.4-1.346-10.288,2.248-3.9,6.643-6,10-4.582,3.577,1.516,4.548,6.37,1.976,10.731-2.555,4.326-7.392,6.1-10.628,4.122Z" transform="translate(7.787 22.788)" fill="#ff7f11"/>\r\n      <path id="Caminho_2010" data-name="Caminho 2010" d="M19.289,9.763c2.861.187,3.577,3.389,1.465,7.12-2.1,3.7-6.013,6.234-8.653,5.706-2.5-.511-2.913-3.611-1.039-6.983,1.891-3.389,5.519-6.013,8.227-5.842Z" transform="translate(6.956 6.877)" fill="#ff7f11"/>\r\n      <path id="Caminho_2011" data-name="Caminho 2011" d="M20.635,30.227c-.46,4.054-3.952,7.988-7.6,8.653-3.441.63-5.655-1.942-5.093-5.655A10.727,10.727,0,0,1,14.9,24.98c3.543-1.022,6.2,1.26,5.74,5.229Z" transform="translate(5.524 17.413)" fill="#ff7f11"/>\r\n      <path id="Caminho_2012" data-name="Caminho 2012" d="M13.892,18.6c2.589.6,3.134,4.054,1.09,7.682C12.955,29.891,9.276,32,6.909,31.1c-2.265-.869-2.538-4.19-.7-7.477,1.84-3.3,5.246-5.57,7.7-5.008Z" transform="translate(3.513 13.048)" fill="#ff7f11"/>\r\n      <path id="Caminho_2013" data-name="Caminho 2013" d="M2.466,21.217a11.169,11.169,0,0,1,5.6-7.341c2.725-1.277,4.633.1,4.156,3.185a10.985,10.985,0,0,1-6.013,7.7c-2.657,1.022-4.275-.6-3.73-3.526Z" transform="translate(1.67 9.441)" fill="#ff7f11"/>\r\n    </g>\r\n    <path id="Caminho_2014" data-name="Caminho 2014" d="M153.419,19.908H129.812a3.049,3.049,0,1,1,0-6.1h28.734V8.36H129.812a8.482,8.482,0,0,0,0,16.964h23.607a3.049,3.049,0,0,1,0,6.1h-31.6v5.45h31.6a8.482,8.482,0,0,0,0-16.964Z" transform="translate(85.326 5.886)" fill="#ff7f11"/>\r\n  </g>\r\n</>'
+export const notification =
+  '<>\r\n  <path id="Notification_Icon" data-name="Notification Icon" d="M93.379,217.878h62.242a31.121,31.121,0,1,1-62.242,0ZM15.561,202.318C6.233,202.318,0,196.085,0,186.757S6.233,171.2,15.561,171.2h7.787c10.883-10.9,23.334-26.458,23.334-46.7V77.818C46.682,34.245,80.928,0,124.5,0s77.8,34.245,77.8,77.818V124.5c0,20.239,12.453,35.8,23.349,46.7h7.787c9.328,0,15.561,6.219,15.561,15.561s-6.233,15.561-15.561,15.561Z" fill="#333"/>\r\n</>'
+export const olos_cloud =
+  '<>\r\n  <path id="cloud" d="M148.418,175.961q1.3.039,2.607.039a86,86,0,1,0-67.1-139.75H70.858a69.875,69.875,0,0,0,0,139.75H146.07Q147.249,176,148.418,175.961ZM169.405,151.5c25.252-8.265,46.086-32.675,46.086-61.5A64.467,64.467,0,1,0,86.558,90H65.069a85.8,85.8,0,0,1,6.248-32.25h-.459a48.375,48.375,0,0,0,0,96.75H146.07A114.856,114.856,0,0,0,169.405,151.5Z" transform="translate(-1.019 -4)" fill="#333" fill-rule="evenodd"/>\r\n</>'
+export const search =
+  '<>\r\n  <g id="search" transform="translate(10 10)">\r\n    <g id="Grupo_2" data-name="Grupo 2" transform="translate(-8 -10)">\r\n      <g id="Icon_feather-search" data-name="Icon feather-search" transform="translate(13 13)">\r\n        <path id="Caminho_1652" data-name="Caminho 1652" d="M206.377,103.75c0,54.814-45.192,99.25-100.939,99.25S4.5,158.564,4.5,103.75,49.692,4.5,105.439,4.5s100.939,44.436,100.939,99.25Z" transform="translate(-9.5 -7.5)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n        <path id="Caminho_1653" data-name="Caminho 1653" d="M83.887,82.887,24.975,24.975" transform="translate(143.446 145.779)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n      </g>\r\n    </g>\r\n  </g>\r\n</>'
+export const sentiment_happy =
+  '<>\r\n  <g id="Icon" transform="translate(-4.761 -4.76)">\r\n    <path id="ic_sentiment_very_satisfied_24px" d="M125.116,2A123.24,123.24,0,1,0,248.479,125.24,123.1,123.1,0,0,0,125.116,2Zm.123,221.831a98.592,98.592,0,1,1,98.592-98.592A98.564,98.564,0,0,1,125.24,223.831ZM137.563,99.852l13.063,13.063L163.69,99.852l13.063,13.063,13.063-13.063L163.69,73.725Zm-50.775,0,13.063,13.063,13.063-13.063L86.789,73.725,60.662,99.852l13.063,13.063Zm38.451,93.169a67.735,67.735,0,0,0,62.975-43.134H62.264A67.735,67.735,0,0,0,125.24,193.021Z" transform="translate(2.761 2.76)" fill="#333"/>\r\n  </g>\r\n</>'
+export const sentiment_dissatisfied =
+  '<>\r\n  <circle id="Elipse_31" data-name="Elipse 31" cx="28" cy="28" r="28" transform="translate(152.355 72)" fill="#333"/>\r\n  <circle id="Elipse_32" data-name="Elipse 32" cx="28" cy="28" r="28" transform="translate(47.645 72)" fill="#333"/>\r\n  <path id="Caminho_109" data-name="Caminho 109" d="M129.872,2A128,128,0,1,0,258,130,127.937,127.937,0,0,0,129.872,2ZM130,232.4A102.4,102.4,0,1,1,232.4,130,102.372,102.372,0,0,1,130,232.4Zm0-76.8a70.338,70.338,0,0,0-65.536,44.8H85.84a50.888,50.888,0,0,1,88.32,0h21.376A70.338,70.338,0,0,0,130,155.6Z" transform="translate(-2 -2)" fill="#333"/>\r\n</>'
+export const sentiment_neutral =
+  '<>\r\n  <g id="ic_sentiment_neutral_24px">\r\n    <path id="Caminho_107" data-name="Caminho 107" d="M9,14H121.52V39.75H9Z" transform="translate(62.74 150.25)" fill="#333"/>\r\n    <circle id="Elipse_29" data-name="Elipse 29" cx="28" cy="28" r="28" transform="translate(154.956 72.478)" fill="#333"/>\r\n    <circle id="Elipse_30" data-name="Elipse 30" cx="28" cy="28" r="28" transform="translate(50.565 72.478)" fill="#333"/>\r\n    <path id="Caminho_108" data-name="Caminho 108" d="M129.872,2A128,128,0,1,0,258,130,127.937,127.937,0,0,0,129.872,2ZM130,232.4A102.4,102.4,0,1,1,232.4,130,102.372,102.372,0,0,1,130,232.4Z" transform="translate(-2 -2)" fill="#333"/>\r\n  </g>\r\n</>'
+export const settings_ethernet =
+  '<>\r\n  <path id="Icon_material-settings-ethernet" data-name="Icon material-settings-ethernet" d="M80.283,22.779,62.766,8.22,1.23,82.382l61.536,74.162,17.517-14.559L30.8,82.382l49.479-59.6ZM71.524,93.756H94.273V71.007H71.524ZM185.269,71.007H162.52V93.756h22.749ZM117.022,93.756h22.749V71.007H117.022ZM194.027,8.22,176.511,22.779l49.479,59.6-49.479,59.6,17.517,14.559,61.536-74.162L194.027,8.22Z" transform="translate(-1.23 -8.22)" fill="#333"/>\r\n</>'
+export const star_outline =
+  '<>\r\n  <path id="Icon_ionic-ios-star-outline" data-name="Icon ionic-ios-star-outline" d="M245.65,90.952H162.577L137.334,9.822a8.938,8.938,0,0,0-17.168,0L94.923,90.952H11.286c-4.97,0-9.036,4.379-9.036,9.731a7.678,7.678,0,0,0,.169,1.642c.113,2.129,1.017,4.5,3.784,6.872l68.276,51.816-26.2,82.043A10.209,10.209,0,0,0,51.382,254c1.638,1.277,3.162,2.372,5.083,2.372a10.585,10.585,0,0,0,5.647-2.189l66.638-51.147,66.638,51.147a10.12,10.12,0,0,0,5.647,2.189c1.92,0,3.445-1.034,5.026-2.372a10.081,10.081,0,0,0,3.106-10.947l-26.2-82.043,67.711-52.3,1.638-1.52c1.468-1.7,2.937-4.014,2.937-6.507A9.9,9.9,0,0,0,245.65,90.952Zm-71.834,56.256a17.835,17.835,0,0,0-5.76,19.34l17,53.337a2.318,2.318,0,0,1-3.445,2.8L137.9,189.111a15.02,15.02,0,0,0-9.205-3.162,14.746,14.746,0,0,0-9.149,3.162l-43.71,33.51c-1.807,1.4-4.179-.547-3.445-2.8l17-53.337a17.891,17.891,0,0,0-5.817-19.462L37.828,112.3c-1.807-1.338-.9-4.44,1.3-4.44H94.866c6.777,0,12.819-4.683,14.965-11.616L126.548,42.6a2.223,2.223,0,0,1,4.292,0l16.716,53.641c2.146,6.933,8.189,11.616,14.965,11.616h54.948a2.438,2.438,0,0,1,1.3,4.379Z" transform="translate(-2.25 -3.375)" fill="#333"/>\r\n</>'
+export const tag =
+  '<path id="Caminho_1941" data-name="Caminho 1941" d="M219.625,135.958l-83.55,83.55a23.305,23.305,0,0,1-32.977,0L3,119.527V3H119.527l100.1,100.1A23.305,23.305,0,0,1,219.625,135.958Z" transform="translate(-3 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>    <path id="Caminho_1942" data-name="Caminho 1942" d="M10.5,10.5h0" transform="translate(47.764 47.764)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>'
+export const trash =
+  '<>\r\n  <g id="trash" transform="translate(10 10)">\r\n    <path id="Caminho_1950" data-name="Caminho 1950" d="M4.5,9H204.425" transform="translate(-4.5 35.428)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1951" data-name="Caminho 1951" d="M163,47.428v155.5a22.214,22.214,0,0,1-22.214,22.214H29.714A22.214,22.214,0,0,1,7.5,202.925V47.428m33.321,0V25.214A22.214,22.214,0,0,1,63.035,3h44.428a22.214,22.214,0,0,1,22.214,22.214V47.428" transform="translate(14.714 -3)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1952" data-name="Caminho 1952" d="M15,16.5V83.142" transform="translate(62.749 83.463)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n    <path id="Caminho_1953" data-name="Caminho 1953" d="M21,16.5V83.142" transform="translate(101.176 83.463)" fill="none" stroke="#333" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>\r\n  </g>\r\n</>'
+export const usd =
+  '<>\r\n  <path id="Icon_metro-money" data-name="Icon metro-money" d="M88.087,117.9c-32.032-8.325-42.333-16.863-42.333-30.268,0-15.381,14.182-26.176,38.1-26.176,25.118,0,34.431,11.995,35.278,29.633h31.185c-.917-24.342-15.8-46.5-45.3-53.763V6.427H62.687v30.48C35.312,42.9,13.3,60.543,13.3,87.848c0,32.6,27.023,48.825,66.322,58.279,35.348,8.467,42.333,20.814,42.333,34.078,0,9.666-6.844,25.188-38.1,25.188-29.069,0-40.57-13.053-42.051-29.633H10.688c1.764,30.9,24.835,48.19,52,54.045v30.621h42.333V230.088c27.446-5.292,49.389-21.167,49.389-50.165,0-39.935-34.29-53.622-66.322-62.018Z" transform="translate(-10.688 -6.427)" fill="#333"/>\r\n</>'
+export const user =
+  '<>\r\n  <path id="Caminho_1941" data-name="Caminho 1941" d="M81.143,131c40.4,0,73.143-28.654,73.143-64S121.539,3,81.143,3,8,31.654,8,67s32.747,64,73.143,64Zm0-96c20.2,0,36.571,14.327,36.571,32S101.341,99,81.143,99,44.571,84.673,44.571,67,60.945,35,81.143,35Z" transform="translate(46.857 -3)" fill="#333"/>\r\n  <path id="Caminho_1942" data-name="Caminho 1942" d="M133,13C62.308,13,5,63.144,5,125c0,8.836,8.187,16,18.286,16s18.286-7.163,18.286-16c0-44.183,40.934-80,91.429-80s91.429,35.817,91.429,80c0,8.837,8.187,16,18.286,16S261,133.837,261,125C261,63.144,203.692,13,133,13Z" transform="translate(-5 115)" fill="#333"/>\r\n</>'
+export const list_check =
+  '<>\r\n  <path id="Icon_material-playlist-add-check" data-name="Icon material-playlist-add-check" d="M145.571,56.524H3V80.286H145.571Zm0-47.524H3V32.762H145.571ZM3,127.81H98.048V104.048H3ZM234.679,74.345,252.5,92.167l-83.048,83.167-53.583-53.464,17.821-17.821,35.762,35.643Z" transform="translate(-3 -9)" fill="#333"/>\r\n</>'
+
+export const icons = {
+  bag,
+  box,
+  card,
+  chart_bars,
+  circle_chart,
+  circle_check,
+  circle_help,
+  circle_not,
+  circle_timer,
+  comment,
+  edit,
+  envelop,
+  eye,
+  female,
+  filter_list,
+  grid,
+  hand,
+  headphone,
+  list_ul,
+  logo_live,
+  logo_olos,
+  notification,
+  olos_cloud,
+  search,
+  sentiment_happy,
+  sentiment_dissatisfied,
+  sentiment_neutral,
+  settings_ethernet,
+  star_outline,
+  tag,
+  trash,
+  usd,
+  user,
+  list_check,
+} as const
+
+export type IconKey = keyof typeof icons

package/src/components/icon/index.ts

@@ -0,0 +1,11 @@
+import { defaultIcons } from './default';
+import { normaIcons } from './norma';
+
+// Combine the icons from both files
+const Icons = { ...defaultIcons, ...normaIcons } as const;
+
+// Export icon types
+export type IconKey = keyof typeof Icons;
+
+// Export icon paths
+export default Icons;