bevi-icon 1.0.7 → 1.0.9
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/README.md
CHANGED
|
@@ -1,107 +1,137 @@
|
|
|
1
|
-
<img src='./public/doc/cover.png' title='BeviIcon' alt='Cover BeviIcon' />
|
|
2
1
|
<div align="center">
|
|
3
|
-
<h3>Biblioteca de ícones da Bevi</h3>
|
|
4
|
-
<span>
|
|
5
|
-
<a href="https://www.npmjs.com/package/bevi-icon"><strong>Npm Package</strong></a>
|
|
6
|
-
</span>
|
|
7
|
-
</div>
|
|
8
2
|
|
|
9
|
-
|
|
10
|
-
<br />
|
|
11
|
-
<br />
|
|
12
|
-
<br />
|
|
3
|
+
# Bevi Icon Library
|
|
13
4
|
|
|
14
|
-
|
|
5
|
+
### Uma biblioteca de ícones voltada para projetos Bevi, oferecendo três variantes de modelos que permitem alterar cores e tamanhos de forma simplificada.
|
|
15
6
|
|
|
16
7
|
<br />
|
|
17
8
|
|
|
18
|
-
|
|
9
|
+
<a href="https://github.com/BeviProjects/bevi-icon/wiki">📖
|
|
10
|
+
<b>Documentation</b></a> ·
|
|
11
|
+
<a href="https://github.com/BeviProjects/bevi-icon/issues">🐞
|
|
12
|
+
<b>Report Bug</b></a> ·
|
|
13
|
+
<a href="https://github.com/BeviProjects/bevi-icon/issues">🚀
|
|
14
|
+
<b>Request Feature</b></a>
|
|
19
15
|
|
|
20
|
-
|
|
21
|
-
npm i bevi-icon
|
|
22
|
-
```
|
|
16
|
+
</div>
|
|
23
17
|
|
|
24
|
-
<br/>
|
|
25
|
-
<br/>
|
|
18
|
+
<br />
|
|
19
|
+
<br />
|
|
20
|
+
<br />
|
|
26
21
|
|
|
27
|
-
##
|
|
22
|
+
## O que é Bevi Icon
|
|
28
23
|
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
A Biblioteca de Ícones da Bevi é uma ferramenta poderosa e
|
|
25
|
+
flexível projetada especificamente para atender às
|
|
26
|
+
necessidades dos projetos Bevi. Ela oferece uma vasta
|
|
27
|
+
coleção de ícones que podem ser facilmente integrados em
|
|
28
|
+
seus aplicativos e sites, proporcionando um toque visual
|
|
29
|
+
distintivo e atraente.
|
|
31
30
|
|
|
32
|
-
|
|
33
|
-
import { BvIcon } from 'bevi-icon'
|
|
34
|
-
```
|
|
31
|
+
### Principais Recursos
|
|
35
32
|
|
|
36
|
-
|
|
33
|
+
- **Três Variantes de Modelo:** A Bevi Icon Library oferece
|
|
34
|
+
três variantes de modelo: `solid`, `duo`, `light` e
|
|
35
|
+
`dark`. Isso permite que você escolha o estilo de ícone
|
|
36
|
+
que melhor se adapta ao seu projeto e ajuste as cores
|
|
37
|
+
conforme necessário.
|
|
37
38
|
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
- **Facilidade de Uso:** Integrar ícones em seu projeto
|
|
40
|
+
nunca foi tão simples. Com uma única linha de código, você
|
|
41
|
+
pode adicionar ícones a botões, barras de navegação, menus
|
|
42
|
+
e muito mais.
|
|
40
43
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
+
- **Personalização Flexível:** A biblioteca permite que você
|
|
45
|
+
personalize o tamanho, a cor e até mesmo adicione títulos
|
|
46
|
+
aos seus ícones, tornando-os altamente adaptáveis às suas
|
|
47
|
+
necessidades de design.
|
|
48
|
+
|
|
49
|
+
- **Acessibilidade:** Os ícones da Bevi Icon Library são
|
|
50
|
+
projetados com acessibilidade em mente. Eles incluem a
|
|
51
|
+
capacidade de adicionar títulos que são usados para
|
|
52
|
+
melhorar a experiência de usuários com leitores de tela.
|
|
44
53
|
|
|
45
54
|
<br />
|
|
46
55
|
<br />
|
|
47
56
|
|
|
48
|
-
##
|
|
57
|
+
## Como começar
|
|
49
58
|
|
|
50
|
-
|
|
59
|
+
### Instalação
|
|
51
60
|
|
|
52
|
-
|
|
61
|
+
Para começar a usar a Biblioteca de Ícones da Bevi, siga os
|
|
62
|
+
passos simples de instalação:
|
|
53
63
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
biblioteca
|
|
57
|
-
|
|
64
|
+
1. Abra seu terminal.
|
|
65
|
+
2. Navegue até a pasta do seu projeto.
|
|
66
|
+
3. Execute o seguinte comando para instalar a biblioteca via
|
|
67
|
+
NPM:
|
|
58
68
|
|
|
59
69
|
```bash
|
|
60
|
-
|
|
70
|
+
npm i bevi-icon
|
|
61
71
|
```
|
|
62
72
|
|
|
73
|
+
Para mais informações sobre o pacote NPM, você pode visitar
|
|
74
|
+
a
|
|
75
|
+
[📦 página do bevi-icon no NPM](https://www.npmjs.com/package/bevi-icon)
|
|
76
|
+
|
|
63
77
|
<br />
|
|
64
78
|
|
|
65
|
-
###
|
|
79
|
+
### Importação
|
|
66
80
|
|
|
67
|
-
|
|
68
|
-
|
|
81
|
+
Depois de instalar a biblioteca, você pode começar a usá-la
|
|
82
|
+
em seu código. Importe o componente `BvIcon` onde você
|
|
83
|
+
deseja utilizar ícones da Bevi Icon Library. Veja como fazer
|
|
84
|
+
isso em JavaScript/ES6:
|
|
69
85
|
|
|
70
|
-
```
|
|
71
|
-
|
|
86
|
+
```jsx
|
|
87
|
+
import { BvIcon } from 'bevi-icon'
|
|
72
88
|
```
|
|
73
89
|
|
|
74
90
|
<br />
|
|
75
91
|
|
|
76
|
-
###
|
|
92
|
+
### Uso Básico
|
|
77
93
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
medida
|
|
81
|
-
[rem](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units).
|
|
94
|
+
Agora que você importou o componente, você pode começar a
|
|
95
|
+
usar ícones em seu projeto. É muito simples:
|
|
82
96
|
|
|
83
|
-
|
|
84
|
-
|
|
97
|
+
Em seu código HTML ou JSX, adicione o componente BvIcon e
|
|
98
|
+
especifique o nome do ícone que você deseja exibir. Exemplo:
|
|
99
|
+
|
|
100
|
+
```jsx
|
|
101
|
+
<BvIcon name='cube' />
|
|
85
102
|
```
|
|
86
103
|
|
|
87
|
-
|
|
104
|
+
Você pode personalizar ainda mais o ícone definindo suas
|
|
105
|
+
propriedades, como variante, tamanho e título. Por exemplo:
|
|
106
|
+
|
|
107
|
+
```jsx
|
|
108
|
+
<BvIcon
|
|
109
|
+
name='cube'
|
|
110
|
+
variant='duo'
|
|
111
|
+
size={4}
|
|
112
|
+
title='Ícone de Cubo'
|
|
113
|
+
/>
|
|
114
|
+
```
|
|
88
115
|
|
|
89
|
-
|
|
116
|
+
Isso é tudo o que você precisa para começar a usar ícones da
|
|
117
|
+
Biblioteca de Ícones da Bevi em seu projeto. É simples e
|
|
118
|
+
altamente personalizável para atender às suas necessidades
|
|
119
|
+
de design.
|
|
90
120
|
|
|
91
|
-
|
|
92
|
-
para acessibilidade e ajuda de leitores de tela.
|
|
121
|
+
<br />
|
|
93
122
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
123
|
+
Lembre-se de consultar a
|
|
124
|
+
[📖 documentação dos ícones disponíveis](https://github.com/BeviProjects/bevi-icon/wiki)
|
|
125
|
+
para encontrar os nomes dos ícones que você pode usar em sua
|
|
126
|
+
aplicação.
|
|
97
127
|
|
|
98
128
|
<br />
|
|
99
129
|
<br />
|
|
100
130
|
|
|
101
131
|
## License
|
|
102
132
|
|
|
103
|
-
Bevi
|
|
104
|
-
[MIT
|
|
133
|
+
A Biblioteca de Ícones da Bevi é licenciada sob os termos da
|
|
134
|
+
[📜 Licença MIT](https://github.com/BeviProjects/bevi-icon/blob/main/LICENSE).
|
|
105
135
|
|
|
106
136
|
<br/>
|
|
107
137
|
<br/>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FC, SVGProps } from 'react';
|
|
2
2
|
interface BvIconProps extends SVGProps<SVGSVGElement> {
|
|
3
|
-
variant?: string | 'solid' | 'duo' | 'dark' | 'light';
|
|
4
3
|
name: string;
|
|
5
|
-
|
|
4
|
+
variant?: string | 'solid' | 'duo' | 'dark' | 'light';
|
|
6
5
|
size?: number;
|
|
6
|
+
title?: string;
|
|
7
7
|
}
|
|
8
8
|
declare const BvIcon: FC<BvIconProps>;
|
|
9
9
|
export default BvIcon;
|
|
@@ -10,10 +10,10 @@ const e = {
|
|
|
10
10
|
light: "25CBDB",
|
|
11
11
|
duo: "inherit"
|
|
12
12
|
}, g = ({
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
title: i,
|
|
13
|
+
name: r,
|
|
14
|
+
variant: t = "solid",
|
|
16
15
|
size: o,
|
|
16
|
+
title: i,
|
|
17
17
|
...d
|
|
18
18
|
}) => /* @__PURE__ */ h(
|
|
19
19
|
"svg",
|
|
@@ -22,14 +22,14 @@ const e = {
|
|
|
22
22
|
height: o ? o * 16 : 32,
|
|
23
23
|
viewBox: "0 0 32 32",
|
|
24
24
|
"aria-hidden": "true",
|
|
25
|
-
"data-icon": `bv-${
|
|
26
|
-
color: `#${e[
|
|
25
|
+
"data-icon": `bv-${r}`,
|
|
26
|
+
color: `#${e[t]}`,
|
|
27
27
|
fill: "none",
|
|
28
28
|
xmlns: "http://www.w3.org/2000/svg",
|
|
29
29
|
...d,
|
|
30
30
|
children: [
|
|
31
31
|
i ? /* @__PURE__ */ n("title", { children: i }) : "",
|
|
32
|
-
/* @__PURE__ */ n(l, { variant:
|
|
32
|
+
/* @__PURE__ */ n(l, { variant: t, name: r })
|
|
33
33
|
]
|
|
34
34
|
}
|
|
35
35
|
);
|