@abqm-ds/icons 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abqm-ds/icons",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/scripts/move-icons.js

@@ -1,6 +1,9 @@
 import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { toPascalCase } from './utils.js';
+import { processSourceDir } from './process.js';
+import { updateIndexFile } from './updateIndex.js';
 
 // Corrigir __dirname em ESM
 const __filename = fileURLToPath(import.meta.url);
@@ -25,73 +28,9 @@ if (!fs.existsSync(finalDir)) {
   fs.mkdirSync(finalDir, { recursive: true });
 }
 
-// Função para processar arquivos de uma pasta
-function processSourceDir(sourceDir, prefixToRemove = /^svg/i) {
-  if (!fs.existsSync(sourceDir)) return [];
-  const files = fs.readdirSync(sourceDir).filter((f) => f.endsWith('.tsx'));
-  const exports = [];
+// Processa os diretórios de origem normalmente
+processSourceDir(tempDir, finalDir);
+processSourceDir(logosDir, finalDir, /^svg/i);
 
-  for (const file of files) {
-    const baseName = path.basename(file, '.tsx');
-    const cleanedName = baseName.replace(prefixToRemove, ''); // Remove prefixo se necessário
-    const componentName = `${cleanedName}Icon`;
-
-    const fromPath = path.join(sourceDir, file);
-    const toPath = path.join(finalDir, `${componentName}.tsx`);
-
-    if (fs.existsSync(toPath)) {
-      console.log(`⏩ Ignorado (já existe): ${componentName}`);
-      continue;
-    }
-
-    // Lê e modifica o conteúdo
-    let fileContent = fs.readFileSync(fromPath, 'utf-8');
-
-    // Remove a linha de importação do React
-    fileContent = fileContent.replace(
-      /import\s+\*\s+as\s+React\s+from\s+['"]react['"];?\n?/g,
-      ''
-    );
-
-    // Renomeia o nome do componente
-    const regex = new RegExp(`const\\s+Svg${cleanedName}\\b`, 'g');
-    fileContent = fileContent.replace(regex, `const ${componentName}`);
-
-    // Atualiza o export default
-    fileContent = fileContent.replace(
-      new RegExp(`export\\s+default\\s+Svg${cleanedName}\\b`, 'g'),
-      `export default ${componentName}`
-    );
-
-    // Escreve novo arquivo e remove o antigo
-    fs.writeFileSync(toPath, fileContent);
-    fs.unlinkSync(fromPath);
-
-    console.log(`✅ Movido e renomeado: ${componentName}`);
-    exports.push(
-      `export { default as ${componentName} } from './components/${componentName}';`
-    );
-  }
-  return exports;
-}
-
-let allExports = [];
-allExports = allExports.concat(processSourceDir(tempDir));
-// Remover apenas "svg" do início, não "logo"
-allExports = allExports.concat(processSourceDir(logosDir, /^svg/i));
-
-// Atualiza index.ts
-if (allExports.length > 0) {
-  let indexContent = '';
-  if (fs.existsSync(indexFile)) {
-    indexContent = fs.readFileSync(indexFile, 'utf-8');
-  }
-
-  const newExports = allExports.filter((e) => !indexContent.includes(e));
-  if (newExports.length > 0) {
-    fs.appendFileSync(indexFile, '\n' + newExports.join('\n') + '\n');
-    console.log('📦 index.ts atualizado');
-  }
-} else {
-  console.log('✅ Nenhum novo componente a mover');
-}
+// Atualiza index.ts para garantir que todos os componentes estejam exportados
+updateIndexFile(finalDir, indexFile);

package/scripts/process.js

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import path from 'path';
+import { toPascalCase } from './utils.js';
+
+// Função para processar arquivos de uma pasta e gerar componentes
+function processSourceDir(sourceDir, finalDir, prefixToRemove = /^svg/i) {
+  if (!fs.existsSync(sourceDir)) return [];
+  const files = fs.readdirSync(sourceDir).filter((f) => f.endsWith('.tsx'));
+  const exports = [];
+
+  for (const file of files) {
+    const baseName = path.basename(file, '.tsx');
+    const cleanedName = baseName.replace(prefixToRemove, '');
+    const pascalName = toPascalCase(cleanedName);
+    const componentName = `${pascalName}Icon`;
+
+    const fromPath = path.join(sourceDir, file);
+    const toPath = path.join(finalDir, `${componentName}.tsx`);
+
+    if (fs.existsSync(toPath)) {
+      console.log(`⏩ Ignorado (já existe): ${componentName}`);
+      continue;
+    }
+
+    let fileContent = fs.readFileSync(fromPath, 'utf-8');
+    fileContent = fileContent.replace(
+      /import\s+\*\s+as\s+React\s+from\s+['"]react['"];?\n?/g,
+      ''
+    );
+    const regex = new RegExp(`const\\s+Svg${cleanedName}\\b`, 'g');
+    fileContent = fileContent.replace(regex, `const ${componentName}`);
+    fileContent = fileContent.replace(
+      new RegExp(`export\\s+default\\s+Svg${cleanedName}\\b`, 'g'),
+      `export default ${componentName}`
+    );
+    fileContent = fileContent.replace(
+      /(<path[^>]*?)\sfill="([^"]+)"([^>]*?>)/g,
+      (match, before, color, after) => {
+        if (before.includes('fill={')) return match;
+        return `${before} fill={props?.fill ? props.fill : '${color}'}${after}`;
+      }
+    );
+    fs.writeFileSync(toPath, fileContent);
+    fs.unlinkSync(fromPath);
+
+    console.log(`✅ Movido e renomeado: ${componentName}`);
+    exports.push(
+      `export { default as ${componentName} } from './components/${componentName}';`
+    );
+  }
+  return exports;
+}
+
+export { processSourceDir };

package/scripts/updateIndex.js

@@ -0,0 +1,16 @@
+import fs from 'fs';
+import path from 'path';
+
+// Atualiza index.ts para garantir que todos os componentes estejam exportados
+function updateIndexFile(finalDir, indexFile) {
+  const componentFiles = fs.readdirSync(finalDir).filter((f) => f.endsWith('.tsx'));
+  const exportLines = componentFiles.map((f) => {
+    const name = path.basename(f, '.tsx');
+    return `export { default as ${name} } from './components/${name}';`;
+  });
+  fs.writeFileSync(indexFile, exportLines.join('\n') + '\n');
+
+  console.log('📦 index.ts atualizado com todos os componentes.');
+}
+
+export { updateIndexFile };

package/scripts/utils.js

@@ -0,0 +1,9 @@
+// Função para converter string para PascalCase
+function toPascalCase(str) {
+  return str
+    .replace(/[-_]+/g, ' ')
+    .replace(/(?:^|\s|\b)(\w)/g, (_, c) => (c ? c.toUpperCase() : ''))
+    .replace(/\s+/g, '');
+}
+
+export { toPascalCase };

package/src/_logos/LogoSeqm.tsx

@@ -9,7 +9,7 @@ const SvgLogoSeqm = (props: SVGProps<SVGSVGElement>) => (
     viewBox="0 0 110 48"
     {...props}
   >
-    <g clipPath="url(#LogoSeqm_svg__a)">
+    <g clipPath="url(#logo-seqm_svg__a)">
       <path
         stroke="#fff"
         strokeMiterlimit={10}
@@ -71,7 +71,7 @@ const SvgLogoSeqm = (props: SVGProps<SVGSVGElement>) => (
       />
     </g>
     <defs>
-      <clipPath id="LogoSeqm_svg__a">
+      <clipPath id="logo-seqm_svg__a">
         <path fill="#fff" d="M.916 0h108.169v48H.915z" />
       </clipPath>
     </defs>

package/src/components/ArrowDownShortIcon.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+const ArrowDownShortIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M12 6a.75.75 0 0 1 .75.75v8.69l3.219-3.221a.752.752 0 0 1 1.062 1.062l-4.5 4.5a.75.75 0 0 1-1.062 0l-4.5-4.5a.75.75 0 1 1 1.062-1.062l3.219 3.22V6.75A.75.75 0 0 1 12 6"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default ArrowDownShortIcon;

package/src/components/AwardFillIcon.tsx

@@ -5,18 +5,16 @@ const AwardFillIcon = (props: SVGProps<SVGSVGElement>) => (
     width="1em"
     height="1em"
     fill="none"
-    viewBox="0 0 16 16"
+    viewBox="0 0 24 24"
     {...props}
   >
     <path
-      fill="#001007"
-      fillOpacity={0.5}
-      d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z"
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="m12 0 2.503 1.296 2.787.423 1.263 2.52 2.006 1.98L20.099 9l.46 2.781-2.006 1.98-1.263 2.52-2.787.423L12 18l-2.504-1.296-2.787-.423-1.263-2.52-2.005-1.98L3.9 9l-.46-2.781 2.006-1.98 1.263-2.52 2.787-.423z"
     />
     <path
-      fill="#001007"
-      fillOpacity={0.5}
-      d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z"
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M6 17.691V24l6-1.5 6 1.5v-6.309l-3.027.459L12 19.689 9.027 18.15z"
     />
   </svg>
 );

package/src/components/BoxArrowInLeftIcon.tsx

@@ -9,13 +9,13 @@ const BoxArrowInLeftIcon = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#1E1E1E"
+      fill={props?.fill ? props.fill : '#1E1E1E'}
       fillRule="evenodd"
       d="M15 5.25a.75.75 0 0 0-.75-.75h-12a.75.75 0 0 0-.75.75v13.5a.75.75 0 0 0 .75.75h12a.75.75 0 0 0 .75-.75v-3a.75.75 0 1 1 1.5 0v3A2.25 2.25 0 0 1 14.25 21h-12A2.25 2.25 0 0 1 0 18.75V5.25A2.25 2.25 0 0 1 2.25 3h12a2.25 2.25 0 0 1 2.25 2.25v3a.75.75 0 1 1-1.5 0z"
       clipRule="evenodd"
     />
     <path
-      fill="#1E1E1E"
+      fill={props?.fill ? props.fill : '#1E1E1E'}
       fillRule="evenodd"
       d="M6.219 12.531a.75.75 0 0 1 0-1.062l4.5-4.5a.75.75 0 1 1 1.062 1.062L8.56 11.25H21.75a.75.75 0 1 1 0 1.5H8.56l3.22 3.219a.752.752 0 0 1-1.061 1.062z"
       clipRule="evenodd"

package/src/components/BroadcastIcon.tsx

@@ -5,19 +5,18 @@ const BroadcastIcon = (props: SVGProps<SVGSVGElement>) => (
     width="1em"
     height="1em"
     fill="none"
-    viewBox="0 0 16 16"
+    viewBox="0 0 24 24"
     {...props}
   >
-    <g clipPath="url(#Broadcast_svg__a)">
+    <g clipPath="url(#broadcast_svg__a)">
       <path
-        fill="#001007"
-        fillOpacity={0.5}
-        d="M3.05 3.05a7 7 0 0 0 0 9.9.5.5 0 0 1-.707.707 8 8 0 0 1 0-11.314.5.5 0 0 1 .707.707m2.122 2.122a4 4 0 0 0 0 5.656.501.501 0 0 1-.708.708 5 5 0 0 1 0-7.072.5.5 0 1 1 .708.708m5.656-.708a.5.5 0 0 1 .708 0 5 5 0 0 1 0 7.072.5.5 0 1 1-.708-.708 4 4 0 0 0 0-5.656.5.5 0 0 1 0-.708m2.122-2.12a.5.5 0 0 1 .707 0 8 8 0 0 1 0 11.313.5.5 0 0 1-.707-.707 7 7 0 0 0 0-9.9.5.5 0 0 1 0-.707zM10 8a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M4.575 4.575a10.5 10.5 0 0 0 0 14.85.75.75 0 0 1-1.06 1.06 12 12 0 0 1 0-16.97.75.75 0 0 1 1.06 1.06m3.183 3.183a6 6 0 0 0 0 8.484.75.75 0 1 1-1.062 1.062 7.5 7.5 0 0 1 0-10.608.75.75 0 1 1 1.062 1.062m8.484-1.062a.75.75 0 0 1 1.062 0 7.5 7.5 0 0 1 0 10.608.752.752 0 0 1-1.062-1.062 6 6 0 0 0 0-8.484.75.75 0 0 1 0-1.062m3.183-3.18a.75.75 0 0 1 1.06 0 12 12 0 0 1 0 16.97.75.75 0 0 1-1.06-1.061 10.5 10.5 0 0 0 0-14.85.75.75 0 0 1 0-1.06zM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0"
       />
     </g>
     <defs>
-      <clipPath id="Broadcast_svg__a">
-        <path fill="#fff" d="M0 0h16v16H0z" />
+      <clipPath id="broadcast_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
       </clipPath>
     </defs>
   </svg>

package/src/components/CaretDownFillIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const CaretDownFillIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M10.87 16.71 3.678 8.487C2.827 7.519 3.517 6 4.806 6h14.388a1.5 1.5 0 0 1 1.13 2.489l-7.195 8.22a1.5 1.5 0 0 1-2.258 0z"
+    />
+  </svg>
+);
+export default CaretDownFillIcon;

package/src/components/CaretLeftFillIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const CaretLeftFillIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="m5.79 13.13 8.223 7.193c.969.85 2.487.16 2.487-1.129V4.806a1.5 1.5 0 0 0-2.488-1.13l-8.22 7.195a1.5 1.5 0 0 0 0 2.258z"
+    />
+  </svg>
+);
+export default CaretLeftFillIcon;

package/src/components/CaretRightFillIcon.tsx

@@ -0,0 +1,17 @@
+import type { SVGProps } from 'react';
+const CaretRightFillIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="m18.21 13.13-8.223 7.193c-.969.85-2.487.16-2.487-1.129V4.806a1.5 1.5 0 0 1 2.489-1.13l8.22 7.195a1.5 1.5 0 0 1 0 2.258z"
+    />
+  </svg>
+);
+export default CaretRightFillIcon;

package/src/components/CircleIcon.tsx

@@ -0,0 +1,24 @@
+import type { SVGProps } from 'react';
+const CircleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <g clipPath="url(#circle_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M12 22.5a10.5 10.5 0 1 1 0-21 10.5 10.5 0 0 1 0 21m0 1.5a12 12 0 1 0 0-24 12 12 0 0 0 0 24"
+      />
+    </g>
+    <defs>
+      <clipPath id="circle_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default CircleIcon;

package/src/components/FacebookIcon.tsx

@@ -5,14 +5,20 @@ const FacebookIcon = (props: SVGProps<SVGSVGElement>) => (
     width="1em"
     height="1em"
     fill="none"
-    viewBox="0 0 12 13"
+    viewBox="0 0 24 24"
     {...props}
   >
-    <path
-      fill="#001007"
-      fillOpacity={0.75}
-      d="M12 6.095C12 2.761 9.314.058 6 .058S-.001 2.76-.001 6.096c0 3.013 2.194 5.51 5.062 5.963V7.841H3.539V6.096h1.524V4.765c0-1.513.896-2.348 2.266-2.348.657 0 1.343.117 1.343.117V4.02h-.756c-.745 0-.978.466-.978.944v1.132h1.664L8.336 7.84H6.938v4.219C9.806 11.606 12 9.109 12 6.095"
-    />
+    <g clipPath="url(#facebook_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M24 12.074C24 5.403 18.627-.002 12-.002 5.37 0-.003 5.405-.003 12.075c0 6.026 4.39 11.02 10.125 11.927v-8.438H7.077v-3.489h3.048V9.413c0-3.026 1.793-4.697 4.533-4.697 1.314 0 2.687.236 2.687.236v2.97H15.83c-1.49 0-1.954.931-1.954 1.887v2.265h3.327l-.531 3.489h-2.798V24C19.611 23.094 24 18.099 24 12.074"
+      />
+    </g>
+    <defs>
+      <clipPath id="facebook_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
   </svg>
 );
 export default FacebookIcon;

package/src/components/FileTextIcon.tsx

@@ -0,0 +1,21 @@
+import type { SVGProps } from 'react';
+const FileTextIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M7.5 6a.75.75 0 0 0 0 1.5h9a.75.75 0 1 0 0-1.5zm-.75 3.75A.75.75 0 0 1 7.5 9h9a.75.75 0 1 1 0 1.5h-9a.75.75 0 0 1-.75-.75M7.5 12a.75.75 0 1 0 0 1.5h9a.75.75 0 1 0 0-1.5zm0 3a.75.75 0 1 0 0 1.5H12a.75.75 0 1 0 0-1.5z"
+    />
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M3 3a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v18a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm15-1.5H6A1.5 1.5 0 0 0 4.5 3v18A1.5 1.5 0 0 0 6 22.5h12a1.5 1.5 0 0 0 1.5-1.5V3A1.5 1.5 0 0 0 18 1.5"
+    />
+  </svg>
+);
+export default FileTextIcon;

package/src/components/FilterIcon.tsx

@@ -5,13 +5,12 @@ const FilterIcon = (props: SVGProps<SVGSVGElement>) => (
     width="1em"
     height="1em"
     fill="none"
-    viewBox="0 0 12 7"
+    viewBox="0 0 24 24"
     {...props}
   >
     <path
-      fill="#001007"
-      fillOpacity={0.5}
-      d="M4.25 6.188a.437.437 0 0 1 .438-.438h2.625a.437.437 0 1 1 0 .875H4.688a.437.437 0 0 1-.438-.437M2.5 3.563a.437.437 0 0 1 .438-.438h6.124a.437.437 0 1 1 0 .875H2.939a.437.437 0 0 1-.438-.437M.75.938A.44.44 0 0 1 1.188.5h9.625a.438.438 0 0 1 0 .875H1.188A.437.437 0 0 1 .75.938"
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M9 15.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 1 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75m-3-4.5a.75.75 0 0 1 .75-.75h10.5a.75.75 0 1 1 0 1.5H6.75a.75.75 0 0 1-.75-.75m-3-4.5A.75.75 0 0 1 3.75 6h16.5a.75.75 0 1 1 0 1.5H3.75A.75.75 0 0 1 3 6.75"
     />
   </svg>
 );

package/src/components/HorseIcon.tsx

@@ -8,7 +8,7 @@ const HorseIcon = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#a6a7a9"
+      fill={props?.fill ? props.fill : '#a6a7a9'}
       d="M24.053 17.49a2.19 2.19 0 0 0 1.057-1.9 26 26 0 0 0 .407-3.138 6.5 6.5 0 0 1 .922-2.105c.377-.8 1.366-2.9 1.43-3.048a.94.94 0 0 1 1.228-.181c.717.327 1.534.073 1.74.181a5.8 5.8 0 0 0 1.3.4c.34.037.306.471.545.618s.922-.257.922-.257.34-.178.408-.325.067-.35.205-.762c.2-.618-.171-.677-.171-.677s-.579-.533-.784-.717a4.7 4.7 0 0 1-1.09-1.583c-.037-.618-.579-.979-.821-1.27-.118-.147-.388-.291-.475-.511a.87.87 0 0 1 0-.505c.374-.291 0-1.487 0-1.487h-.138a1 1 0 0 1-.135.508c-.138.181-.41.8-.582.618s-.478.034-.478.034c.273-.4-.135-1.38-.135-1.38h-.138v.11a3.2 3.2 0 0 1-.135.691c-.067.181-.615 1.086-.615 1.086a5.5 5.5 0 0 0-.733.452c-.205.178-.379.121-.629.068-.511-.11-4.3 2.105-6.036 4.123a2.68 2.68 0 0 1-2.184 1.086 16 16 0 0 0-2.49 1.016 11.7 11.7 0 0 1-4.263-.615c-2.046-.762-3.651-1.414-6.036-.471a7 7 0 0 1-.888.288 9 9 0 0 0-.989.327s-1.877-.254-3.069 2.432a12.95 12.95 0 0 0-.989 7.653 2.6 2.6 0 0 1 .1-.725c.1-.254.613 1.7.818 2.032v-.725a10.5 10.5 0 0 1 .615 1.594 6 6 0 0 1 .138.725 6.7 6.7 0 0 0-.1-1.521c-.135-.327.306.578.306.435s-.034-1.05-.034-1.3.273.147.239-1.558a19 19 0 0 1-.034-4.174c.275-1.2.169-1.38.169-1.38a6.4 6.4 0 0 0 .138 1.233 12.5 12.5 0 0 0 .922 3.192c.579 1.016 1.36 2.032 1.09 2.83a15 15 0 0 0-.683 2 1.04 1.04 0 0 1-.171.581 1.98 1.98 0 0 0-.236 1.487 7.8 7.8 0 0 1 .205 2.393c0 .689-.034 2.647-.034 2.794s0 .288.138.361a.63.63 0 0 1 .236.364c.037.11.377.181.377.435s-.205.581-.205.689.309.325.309.325a7.8 7.8 0 0 0 1.6 0 6.5 6.5 0 0 0-.579-.906.42.42 0 0 0-.239-.361c-.236-.107-.34-.291-.34-.689a1.9 1.9 0 0 0-.067-.872 31 31 0 0 1-.037-3.522l.1-.144s.613 2.176.649 2.576-.1.979.273 1.414a3.1 3.1 0 0 0 .683.618s.171.257.034.437-.306.435-.205.542a.9.9 0 0 0 .34.181 4.4 4.4 0 0 0 1.464.073s-.236-.618-.3-.762a1.5 1.5 0 0 0-.377-.578c-.239-.22-.478-.183-.478-.511s-.169-.435-.41-1.05a16 16 0 0 1-.478-2.9 14.3 14.3 0 0 0 .478-2.359v-1.594a3.25 3.25 0 0 0 .615-1.38 6.3 6.3 0 0 1 1.43-2.356c.239-.217.377-.144.649-.107s.273-.107.582-.254 1.568.579 2.113.979a16.9 16.9 0 0 0 5.694 1.507l.141.014c2.763.291 1.3.217 1.433.217a17 17 0 0 0-.377 2c-.1.945-.309 1.848-.309 2.393a8 8 0 0 1-.067 1.671c-.1.181-.483 1.888-.483 1.888s-.54.545-.4.762.4.254.4.618.132.979 0 1.086-.174.217 0 .254a1.4 1.4 0 0 1 .413.217s.306.4 1.329.181a.93.93 0 0 0-.273-.579 1.4 1.4 0 0 0-.475-.4c-.205-.11-.1-.288-.239-.655s-.205-.578-.205-.578a.9.9 0 0 0 .273-.581 16 16 0 0 1 .613-2.176 8.5 8.5 0 0 0 .75-1.741 28 28 0 0 1 .922-2.9c.2-.471.239-.291.239.071s.4 1.49.183 2.105a3.5 3.5 0 0 0 0 2.066 2.54 2.54 0 0 1 .194 1.27 11 11 0 0 1-.194 1.778c-.079.254-.261.471 0 .688a4 4 0 0 1 .469.471 2.6 2.6 0 0 1 .239.835c0 .107-.306.291-.205.364a4 4 0 0 1 .41.471 8.2 8.2 0 0 0 1.6-.037v-.144a5.2 5.2 0 0 0-.837-1.053c-.287-.181-.219-.364-.357-.581a2.9 2.9 0 0 1-.306-.906 3.5 3.5 0 0 0-.034-.615c-.037-.11.1-2.032.1-2.032a6.8 6.8 0 0 0 .343-1.958 3.3 3.3 0 0 1 .253-1.925 5.02 5.02 0 0 0 .799-3.387"
     />
   </svg>

package/src/components/InstagramIcon.tsx

@@ -5,14 +5,20 @@ const InstagramIcon = (props: SVGProps<SVGSVGElement>) => (
     width="1em"
     height="1em"
     fill="none"
-    viewBox="0 0 12 13"
+    viewBox="0 0 24 24"
     {...props}
   >
-    <path
-      fill="#001007"
-      fillOpacity={0.75}
-      d="M6 .059c-1.628 0-1.833.007-2.473.036-.64.03-1.075.13-1.457.279-.4.15-.763.386-1.063.692-.305.3-.541.662-.692 1.063-.148.38-.25.817-.279 1.455C.008 4.224 0 4.429 0 6.059s.008 1.833.036 2.473c.03.64.13 1.075.279 1.457.154.394.359.729.692 1.062s.668.54 1.062.693c.383.148.818.25 1.457.279.64.028.844.036 2.474.036s1.833-.008 2.473-.036c.639-.03 1.076-.13 1.458-.28.4-.15.762-.386 1.062-.692.333-.333.538-.668.692-1.062.148-.382.249-.818.279-1.457.028-.64.036-.844.036-2.473s-.008-1.834-.036-2.475c-.03-.638-.131-1.074-.279-1.455-.15-.4-.387-.763-.692-1.063A2.9 2.9 0 0 0 9.93.374c-.383-.149-.819-.25-1.457-.28C7.833.067 7.629.06 5.998.06zM5.462 1.14h.539c1.602 0 1.792.005 2.424.035.585.026.903.124 1.114.206.28.109.48.24.69.45s.34.409.449.69c.082.21.18.528.206 1.113.03.632.035.822.035 2.423s-.006 1.792-.035 2.424c-.026.585-.125.902-.206 1.114-.096.26-.25.496-.45.69-.21.21-.409.339-.69.448-.21.082-.527.18-1.113.207-.633.028-.822.035-2.424.035s-1.793-.007-2.425-.035c-.585-.027-.902-.125-1.114-.207a1.86 1.86 0 0 1-.69-.449 1.9 1.9 0 0 1-.45-.69c-.082-.21-.18-.529-.206-1.114-.029-.632-.035-.822-.035-2.424s.006-1.791.035-2.424c.027-.585.124-.903.207-1.114.109-.28.24-.48.45-.69s.409-.34.69-.449c.21-.082.528-.18 1.113-.207.554-.025.768-.033 1.886-.033zm3.741.996a.72.72 0 1 0 0 1.44.72.72 0 0 0 0-1.44m-3.202.842a3.082 3.082 0 1 0-.096 6.163A3.082 3.082 0 0 0 6 2.978m0 1.08a2 2 0 1 1 0 4 2 2 0 0 1 0-4"
-    />
+    <g clipPath="url(#instagram_svg__a)">
+      <path
+        fill={props?.fill ? props.fill : '#1E1E1E'}
+        d="M12 0C8.743 0 8.334.015 7.055.072 5.775.132 4.904.333 4.14.63c-.8.301-1.526.774-2.125 1.385A5.9 5.9 0 0 0 .63 4.14c-.297.762-.5 1.635-.558 2.91C.015 8.332 0 8.74 0 12.002c0 3.257.015 3.665.072 4.945.06 1.278.261 2.15.558 2.913a5.9 5.9 0 0 0 1.385 2.125 5.86 5.86 0 0 0 2.123 1.385c.766.297 1.636.5 2.914.558C8.332 23.985 8.74 24 12 24s3.666-.015 4.947-.072c1.277-.06 2.151-.261 2.915-.558a5.9 5.9 0 0 0 2.124-1.385 5.9 5.9 0 0 0 1.384-2.125c.296-.764.498-1.635.558-2.913.057-1.28.072-1.687.072-4.947s-.015-3.668-.072-4.948c-.06-1.277-.262-2.15-.558-2.912a5.9 5.9 0 0 0-1.385-2.125A5.9 5.9 0 0 0 19.86.63c-.765-.297-1.638-.5-2.915-.558C15.666.015 15.259 0 11.997 0h.005zm-1.075 2.163H12c3.205 0 3.584.01 4.849.069 1.17.052 1.805.249 2.228.412.56.218.96.479 1.38.899s.68.819.898 1.38c.164.422.36 1.058.412 2.228.058 1.264.07 1.643.07 4.846s-.012 3.584-.07 4.848c-.053 1.17-.249 1.805-.413 2.228-.192.52-.499.992-.898 1.378-.42.42-.819.68-1.38.897-.42.165-1.056.36-2.228.414-1.264.057-1.643.07-4.847.07s-3.586-.013-4.85-.07c-1.17-.054-1.804-.249-2.227-.414a3.7 3.7 0 0 1-1.38-.897 3.7 3.7 0 0 1-.9-1.38c-.164-.422-.36-1.058-.413-2.228-.057-1.264-.069-1.643-.069-4.849 0-3.204.012-3.582.069-4.846.054-1.17.249-1.806.414-2.23.218-.559.478-.96.899-1.38.42-.42.819-.679 1.38-.896.423-.165 1.057-.36 2.227-.414 1.107-.052 1.536-.066 3.773-.068zm7.482 1.992a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88m-6.405 1.683a6.163 6.163 0 1 0-.193 12.325 6.163 6.163 0 0 0 .193-12.325m0 2.162a4 4 0 1 1 0 8 4 4 0 0 1 0-8"
+      />
+    </g>
+    <defs>
+      <clipPath id="instagram_svg__a">
+        <path fill={props?.fill ? props.fill : '#fff'} d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
   </svg>
 );
 export default InstagramIcon;

package/src/components/ListIcon.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+const ListIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      fillRule="evenodd"
+      d="M3.75 18a.75.75 0 0 1 .75-.75h15a.75.75 0 1 1 0 1.5h-15a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h15a.75.75 0 1 1 0 1.5h-15a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h15a.75.75 0 1 1 0 1.5h-15A.75.75 0 0 1 3.75 6"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default ListIcon;

package/src/components/ListOlIcon.tsx

@@ -5,20 +5,18 @@ const ListOlIcon = (props: SVGProps<SVGSVGElement>) => (
     width="1em"
     height="1em"
     fill="none"
-    viewBox="0 0 16 16"
+    viewBox="0 0 24 24"
     {...props}
   >
     <path
-      fill="#001007"
-      fillOpacity={0.5}
+      fill={props?.fill ? props.fill : '#1E1E1E'}
       fillRule="evenodd"
-      d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5"
+      d="M7.5 17.25a.75.75 0 0 1 .75-.75h13.5a.75.75 0 1 1 0 1.5H8.25a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h13.5a.75.75 0 1 1 0 1.5H8.25a.75.75 0 0 1-.75-.75m0-6a.75.75 0 0 1 .75-.75h13.5a.75.75 0 1 1 0 1.5H8.25a.75.75 0 0 1-.75-.75"
       clipRule="evenodd"
     />
     <path
-      fill="#001007"
-      fillOpacity={0.5}
-      d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635z"
+      fill={props?.fill ? props.fill : '#1E1E1E'}
+      d="M2.57 17.798v-.711H3c.325 0 .545-.206.545-.476 0-.277-.237-.465-.542-.465-.335 0-.55.228-.56.465h-.885c.024-.7.56-1.18 1.48-1.18.882-.003 1.43.436 1.435 1.054a.89.89 0 0 1-.738.891v.05a.923.923 0 0 1 .853.946c.005.8-.752 1.2-1.576 1.2-.984 0-1.5-.555-1.512-1.191h.873c.012.267.279.459.633.463.381 0 .636-.217.633-.524-.003-.293-.232-.523-.621-.523h-.45zm-.006-7.049h-.907v-.053c0-.611.443-1.266 1.438-1.266.874 0 1.44.49 1.44 1.135 0 .583-.386.925-.715 1.271l-.805.858v.045h1.581v.761H1.715v-.592l1.435-1.485c.207-.213.44-.457.44-.762 0-.27-.221-.48-.514-.48a.495.495 0 0 0-.513.507zM3.846 7.5h-.953V4.386h-.046l-.897.63v-.85l.944-.665h.952z"
     />
   </svg>
 );

package/src/components/LogoPadraoIcon.tsx

@@ -18,22 +18,22 @@ const LogoPadraoIcon = (props: SVGProps<SVGSVGElement>) => (
       rx={29.5}
     />
     <path
-      fill="#002710"
+      fill={props?.fill ? props.fill : '#002710'}
       fillOpacity={0.25}
       d="m19.264 24.41 1.31-.643.992 1.071-.207-1.448 1.324-.613-1.437-.25-.174-1.45-.682 1.29-1.431-.28 1.016 1.047zM22.877 26.915l-.005.032.008-.025zM15.885 24.688l.894-1.022 1.236.562-.695-1.166.914-1.004-1.323.3-.67-1.181-.121 1.354-1.331.274 1.248.532zM24.812 26.058l-.596-1.22-1.34.22.976-.945-.621-1.208 1.199.636.954-.965-.235 1.338 1.213.613-1.344.187z"
     />
     <path
-      fill="#002710"
+      fill={props?.fill ? props.fill : '#002710'}
       fillOpacity={0.25}
       d="M13.302 34.783c-.771-.447-.697-1.08-.771-1.383-.076-.3-.298-1.834-.298-2.28 0-.448-.398-.95-.672-1.53s-.995-2.11-1.043-2.215c-.052-.105-.373-.369-.896-.132-.522.237-1.119.054-1.268.132s-.695.263-.944.29c-.25.027-.224.343-.398.448-.174.107-.672-.185-.672-.185s-.248-.13-.297-.236c-.05-.106-.05-.254-.15-.553-.148-.449.125-.492.125-.492s.422-.388.572-.52.779-.876.794-1.15c.026-.449.422-.712.598-.923.086-.106.282-.211.347-.371.066-.157 0-.367 0-.367-.273-.21 0-1.082 0-1.082h.1s0 .237.098.37c.101.132.299.58.424.448.124-.133.347.026.347.026-.198-.29.1-1.002.1-1.002h.1v.079c0 .079.05.369.1.501.049.132.447.791.447.791s.386.2.535.329.276.089.458.049c.374-.08 3.131 1.53 4.4 2.996.677.781 1.244.765 1.592.79.348.027 1.815.74 1.815.74s1.616.105 3.107-.448c1.491-.554 2.66-1.028 4.4-.344 0 0 .397.159.646.21.25.055.72.239.72.239s1.369-.185 2.238 1.767c.869 1.95 1.044 3.954.72 5.562 0 0 0-.344-.074-.527-.074-.185-.447 1.238-.596 1.475v-.527c0-.08-.375.87-.447 1.159-.075.29-.1.527-.1.527s-.024-.869.075-1.106c.098-.237-.224.42-.224.316 0-.105.024-.764.024-.949s-.199.106-.174-1.132c.026-1.24.224-2.162.026-3.033-.2-.869-.124-1.002-.124-1.002s-.025.738-.1.896c0 0-.249 1.582-.672 2.32-.423.739-.992 1.477-.795 2.057.198.58.498 1.238.498 1.45 0 .21.049.263.125.422.073.157.347.686.172 1.08-.172.396-.148 1.24-.148 1.74 0 .501.024 1.924.024 2.03s0 .21-.1.264c-.097.053-.149.184-.173.263-.026.08-.274.132-.274.317 0 .184.15.423.15.501s-.225.236-.225.236-1.167.08-1.167 0 .422-.66.422-.66 0-.184.175-.262c.172-.079.247-.212.247-.5 0-.291-.049-.345.05-.634.1-.29.027-2.558.027-2.558l-.077-.104s-.446 1.58-.472 1.872c-.024.29.076.711-.199 1.027a2.3 2.3 0 0 1-.497.448s-.124.186-.024.317c.1.132.223.317.148.395-.073.08-.248.132-.248.132s-.82.159-1.068.053c0 0 .173-.448.222-.553.05-.107.1-.264.274-.42.174-.16.348-.134.348-.372 0-.236.124-.316.299-.763.173-.45.348-1.925.348-2.109 0-.186-.348-1.054-.348-1.715V36.55s-.274-.29-.449-1.003c-.171-.71-.87-1.554-1.042-1.713-.174-.158-.274-.105-.473-.079-.199.027-.199-.079-.424-.184-.223-.105-1.143.422-1.54.713-.391.285-2.176.874-4.15 1.095l-.102.01c-2.013.21-.943.157-1.044.157 0 0 .2.767.274 1.451.075.686.225 1.344.225 1.74 0 .397-.025 1.082.048 1.213.076.132.352 1.371.352 1.371s.394.396.295.554c-.1.157-.293.184-.295.449-.004.262-.096.711 0 .79.097.079.127.157 0 .185-.127.025-.3.157-.3.157s-.225.29-.97.132c0 0 0-.21.2-.422.198-.21.198-.21.346-.289.15-.08.075-.21.174-.475.1-.264.15-.422.15-.422s-.2-.184-.2-.422c0-.237-.397-1.45-.447-1.582-.05-.131-.398-.659-.546-1.265-.15-.606-.523-1.766-.673-2.108-.148-.343-.173-.211-.173.051 0 .264-.29 1.082-.132 1.53s.14 1.317 0 1.502c-.142.186-.142.607-.142.923s.085 1.108.142 1.292.19.343 0 .5c-.192.16-.265.266-.341.343-.074.08-.173.527-.173.607 0 .078.224.21.15.264-.076.052-.299.343-.299.343s-.747.052-1.168-.027v-.106s.401-.632.61-.764.16-.264.26-.422c.098-.156.222-.554.222-.66 0-.104 0-.368.025-.447s-.073-1.476-.073-1.476-.275-.818-.25-1.424.04-1.063-.184-1.398c-.81-1.21-.585-2.45-.585-2.45"
     />
     <path
-      fill="#002710"
+      fill={props?.fill ? props.fill : '#002710'}
       fillOpacity={0.25}
       d="M29.483 25.416c2.17 2.276 3.117 4.93 3.117 8.324a12.64 12.64 0 0 1-3.995 9.238c7.623-3.566 14.452-10.992 14.452-10.992-4.504-.582-9.693-3.395-13.574-6.57M51.437 15.85c.396 3.34.906 7.368-1.018 13.32l3.62-9.927c.731-2.106-1.753-3.239-2.602-3.393"
     />
     <path
-      fill="#002710"
+      fill={props?.fill ? props.fill : '#002710'}
       fillOpacity={0.25}
       d="M51.184 19.77c-5.888 4.448-23.261-1.985-30.542-1.434-6.733.509-9.436 4.601-9.436 4.601l.024-.018a13.44 13.44 0 0 1 8.13-2.724c3.463 0 6.257 1.245 9.013 3.453 1.176 1.077 2.412 1.748 3.562 2.442 9.557 5.77 13.627 5.036 13.627 5.036-7.179 9.015-16.806 12.48-16.806 12.48 9.108 1.529 15.494-.771 15.495-.771l6.168-13.665.015-.033c.775-3.04 1.167-7.199.75-9.368"
     />