@abqm-ds/icons 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +20 -0
- package/.turbo/turbo-clean.log +4 -0
- package/CHANGELOG.md +19 -0
- package/README.md +141 -0
- package/dist/index.cjs +2494 -0
- package/dist/index.d.cts +46 -0
- package/dist/index.d.ts +46 -0
- package/dist/index.js +2460 -0
- package/package.json +32 -0
- package/scripts/move-icons.js +84 -0
- package/src/_temp/AwardFill.tsx +24 -0
- package/src/_temp/Broadcast.tsx +26 -0
- package/src/_temp/CaretDown.tsx +19 -0
- package/src/_temp/CaretRight.tsx +19 -0
- package/src/_temp/Facebook.tsx +19 -0
- package/src/_temp/Filter.tsx +19 -0
- package/src/_temp/Horse.tsx +17 -0
- package/src/_temp/Instagram.tsx +19 -0
- package/src/_temp/ListOl.tsx +26 -0
- package/src/_temp/LogoSeqm.tsx +80 -0
- package/src/_temp/LogoSeqmMobile.tsx +36 -0
- package/src/_temp/Menu.tsx +21 -0
- package/src/_temp/PencilSquare.tsx +26 -0
- package/src/_temp/PersonCircle.tsx +27 -0
- package/src/_temp/Plus.tsx +19 -0
- package/src/_temp/Printer.tsx +19 -0
- package/src/_temp/Search.tsx +26 -0
- package/src/_temp/Star.tsx +19 -0
- package/src/_temp/X.tsx +19 -0
- package/src/_temp/Youtube.tsx +19 -0
- package/src/components/AwardFillIcon.tsx +23 -0
- package/src/components/BoxArrowInLeftIcon.tsx +25 -0
- package/src/components/BroadcastIcon.tsx +25 -0
- package/src/components/CaretDownIcon.tsx +18 -0
- package/src/components/CaretRightIcon.tsx +18 -0
- package/src/components/FacebookIcon.tsx +18 -0
- package/src/components/FilterIcon.tsx +18 -0
- package/src/components/HorseIcon.tsx +16 -0
- package/src/components/InstagramIcon.tsx +18 -0
- package/src/components/ListOlIcon.tsx +25 -0
- package/src/components/LogoSeqmIcon.tsx +79 -0
- package/src/components/LogoSeqmMobileIcon.tsx +35 -0
- package/src/components/MenuIcon.tsx +20 -0
- package/src/components/PencilSquareIcon.tsx +25 -0
- package/src/components/PersonCircleIcon.tsx +26 -0
- package/src/components/PlusIcon.tsx +18 -0
- package/src/components/PrinterIcon.tsx +18 -0
- package/src/components/SearchIcon.tsx +25 -0
- package/src/components/StarIcon.tsx +18 -0
- package/src/components/XIcon.tsx +18 -0
- package/src/components/YoutubeIcon.tsx +18 -0
- package/src/icons/AwardFill.svg +4 -0
- package/src/icons/BoxArrowInLeft.svg +4 -0
- package/src/icons/Broadcast.svg +10 -0
- package/src/icons/CaretDown.svg +3 -0
- package/src/icons/CaretRight.svg +3 -0
- package/src/icons/Facebook.svg +3 -0
- package/src/icons/Filter.svg +3 -0
- package/src/icons/Horse.svg +3 -0
- package/src/icons/Instagram.svg +3 -0
- package/src/icons/ListOl.svg +4 -0
- package/src/icons/LogoSeqm.svg +44 -0
- package/src/icons/LogoSeqmMobile.svg +10 -0
- package/src/icons/Menu.svg +3 -0
- package/src/icons/PencilSquare.svg +4 -0
- package/src/icons/PersonCircle.svg +11 -0
- package/src/icons/Plus.svg +3 -0
- package/src/icons/Printer.svg +3 -0
- package/src/icons/Search.svg +10 -0
- package/src/icons/Star.svg +3 -0
- package/src/icons/X.svg +3 -0
- package/src/icons/Youtube.svg +3 -0
- package/src/index.ts +32 -0
- package/tsconfig.json +20 -0
- package/tsup.config.ts +10 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
> @abqm-ds/icons@1.0.3 build
|
|
3
|
+
> tsup --dts
|
|
4
|
+
|
|
5
|
+
[34mCLI[39m Building entry: src/index.ts
|
|
6
|
+
[34mCLI[39m Using tsconfig: tsconfig.json
|
|
7
|
+
[34mCLI[39m tsup v8.4.0
|
|
8
|
+
[34mCLI[39m Using tsup config: A:\repositories\seqm_projects\design-system\packages\icons\tsup.config.ts
|
|
9
|
+
[34mCLI[39m Target: esnext
|
|
10
|
+
[34mCLI[39m Cleaning output folder
|
|
11
|
+
[34mESM[39m Build start
|
|
12
|
+
[34mCJS[39m Build start
|
|
13
|
+
[32mCJS[39m [1mdist\index.cjs [22m[32m126.77 KB[39m
|
|
14
|
+
[32mCJS[39m ⚡️ Build success in 28ms
|
|
15
|
+
[32mESM[39m [1mdist\index.js [22m[32m125.84 KB[39m
|
|
16
|
+
[32mESM[39m ⚡️ Build success in 29ms
|
|
17
|
+
[34mDTS[39m Build start
|
|
18
|
+
[32mDTS[39m ⚡️ Build success in 1341ms
|
|
19
|
+
[32mDTS[39m [1mdist\index.d.ts [22m[32m2.35 KB[39m
|
|
20
|
+
[32mDTS[39m [1mdist\index.d.cts [22m[32m2.35 KB[39m
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# @abqm-ds/icons
|
|
2
|
+
|
|
3
|
+
## 1.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- feat: 🎸 Adicionará componetes ícones e tokens novos
|
|
8
|
+
|
|
9
|
+
## 1.0.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- feat: 🎸 Melhorias em todas as libs icons/react/tokens
|
|
14
|
+
|
|
15
|
+
## 1.0.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- feat: 🎸 Adicionará novos ícones e componentes
|
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @abqm-ds/icons
|
|
2
|
+
|
|
3
|
+
> Biblioteca de ícones em React baseada em SVGs personalizados da ABQM.
|
|
4
|
+
|
|
5
|
+
Esta biblioteca fornece ícones SVG como componentes React, permitindo o uso simples, estilização via props, e integração fluida com projetos em React ou design systems internos.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## 📦 Instalação
|
|
10
|
+
|
|
11
|
+
No seu projeto React (com suporte a pacotes do monorepo):
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @abqm-ds/icons
|
|
15
|
+
# ou
|
|
16
|
+
npm install @abqm-ds/icons
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
### ⚙️ Como Funciona
|
|
22
|
+
|
|
23
|
+
1. Adicione os arquivos **SVG** que deseja converter na pasta src/icons:
|
|
24
|
+
|
|
25
|
+
> OBS: a nomenclaruta dos icones deve ser capitalized, ex:
|
|
26
|
+
>
|
|
27
|
+
> ❌ caretright.svg
|
|
28
|
+
>
|
|
29
|
+
> ✅ CaretRight.svg
|
|
30
|
+
|
|
31
|
+
2. Em seguida, execute o comando abaixo no terminal:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm run generate:icons
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
3. O processo de geração segue estas etapas:
|
|
38
|
+
- Os ícones são convertidos e salvos temporariamente na pasta `_temp`.
|
|
39
|
+
- Em seguida, são organizados e movidos para a pasta `componentes`.
|
|
40
|
+
|
|
41
|
+
> 💡 Esse processo evita que todos os ícones existentes sejam modificados a cada nova adição. O script verifica se um ícone já existe e somente cria ou atualiza os que são realmente novos ou alterados.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 💡 Como Usar
|
|
46
|
+
|
|
47
|
+
Importe o componente do ícone desejado diretamente:
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import { Facebook, Instagram, Youtube, Horse } from '@abqm-ds/icons';
|
|
51
|
+
|
|
52
|
+
export function Example() {
|
|
53
|
+
return (
|
|
54
|
+
<div style={ display: 'flex', gap: 16 }>
|
|
55
|
+
<Facebook width={24} height={24} fill="#1877F2" />
|
|
56
|
+
<Instagram width={24} height={24} fill="#E1306C" />
|
|
57
|
+
<Youtube width={24} height={24} fill="#FF0000" />
|
|
58
|
+
<Horse width={32} height={32} />
|
|
59
|
+
</div>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## 🎯 Props Aceitas
|
|
67
|
+
|
|
68
|
+
Todos os ícones exportados são componentes React SVG e aceitam todas as propriedades nativas de SVG:
|
|
69
|
+
|
|
70
|
+
| Prop | Tipo | Exemplo |
|
|
71
|
+
| ----------- | ----------------------------- | -------------------------- |
|
|
72
|
+
| `width` | `number \| string` | `24`, `"1em"` |
|
|
73
|
+
| `height` | `number \| string` | `24`, `"1.5rem"` |
|
|
74
|
+
| `fill` | `string` (cor em HEX ou nome) | `"#333"`, `"currentColor"` |
|
|
75
|
+
| `className` | `string` | `"icon-large"` |
|
|
76
|
+
| `style` | `React.CSSProperties` | `{ marginRight: 8 }` |
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 🛠 Desenvolvimento
|
|
81
|
+
|
|
82
|
+
### Gerar componentes a partir de SVGs
|
|
83
|
+
|
|
84
|
+
1. Coloque seus arquivos SVG em `src/icons/`.
|
|
85
|
+
2. Rode o comando:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npm run generate
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Isso irá converter todos os SVGs para componentes React TypeScript (`.tsx`) e salvá-los em `src/components/`.
|
|
92
|
+
|
|
93
|
+
### Compilar a lib
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
npm run build
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Esse comando usa o `tsup` para gerar a pasta `dist/` com módulos `esm`, `cjs` e os arquivos `.d.ts`.
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## 📁 Estrutura
|
|
104
|
+
|
|
105
|
+
```bash
|
|
106
|
+
packages/icons/
|
|
107
|
+
├── scripts/ # Scripts de desenvolvimento
|
|
108
|
+
├── src/
|
|
109
|
+
│ ├── icons/ # SVGs originais
|
|
110
|
+
│ ├── components/ # Componentes React (.tsx)
|
|
111
|
+
│ ├── _temp/ # Svgs Temporários
|
|
112
|
+
│ └── index.ts # Exportações centralizadas
|
|
113
|
+
├── tsconfig.json
|
|
114
|
+
├── package.json
|
|
115
|
+
└── README.md
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## 🧪 Exemplo de Estilização via Tailwind
|
|
121
|
+
|
|
122
|
+
```tsx
|
|
123
|
+
<FacebookIcon className="w-6 h-6 text-blue-600" />
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## 🤝 Contribuição
|
|
129
|
+
|
|
130
|
+
Para adicionar novos ícones:
|
|
131
|
+
|
|
132
|
+
1. Adicione o SVG em `src/icons/`
|
|
133
|
+
2. Rode `npm run generate`
|
|
134
|
+
3. Adicione ao a exportação em `src/index.ts`
|
|
135
|
+
4. Teste no seu projeto local
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## 📃 Licença
|
|
140
|
+
|
|
141
|
+
Este projeto é privado e pertence à ABQM. Uso externo é restrito.
|