@iconis/icons 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pedro Marques
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# iconis
+
+[![npm version](https://img.shields.io/npm/v/@iconis/icons)](https://www.npmjs.com/package/@iconis/icons)
+[![npm downloads](https://img.shields.io/npm/dw/@iconis/icons)](https://www.npmjs.com/package/@iconis/icons)
+[![license](https://img.shields.io/npm/l/@iconis/icons)](https://www.npmjs.com/package/@iconis/icons)
+
+Iconis é uma biblioteca de ícones em **SVG inline** para uso em projetos web.
+- Sem webfont - Evita “texto virando ícone” do nada por atraso de carregamento ou peso do bundle
+- Ícones com `fill="currentColor"` - Possibilita controlar cor via CSS/Tailwind;
+- Exports tipados e documentados usando TSDocs - Disponibilizando tooltip amigavel que ajuda na hora de implementar no código;
+
+## Instalação
+No terminal do projeto:
+
+```bash
+npm install @iconis/icons
+```
+## Uso
+### Exemplo de uso em Angular 17+ (com inject)
+Em versões mais novas do angular temos o inject moderno disponivel, sem necessidade de usar o construtor.
+
+```ts
+import { Component, inject } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { cakeIconRegular } from '@iconis/icons';
+
+@Component({
+  selector: 'app-exemplo',
+  standalone: true,
+  template: `<span class="w-6 h-6 text-slate-600" [innerHTML]="icone"></span>`,
+})
+export class ExemploComponent {
+  private readonly sanitizer = inject(DomSanitizer);
+
+  protected readonly icone: SafeHtml =
+    this.sanitizer.bypassSecurityTrustHtml(cakeIconRegular);
+}
+```
+
+### Exemplo de uso em versões anteriores do Angular (com constructor)
+Em versões mais antigas do Angular precisamos injetar através do construtor, do modo tradicional.
+
+```ts
+import { Component } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { cakeIconRegular } from '@iconis/icons';
+
+@Component({
+  selector: 'app-exemplo',
+  template: `<span class="w-6 h-6 text-slate-600" [innerHTML]="icone"></span>`,
+})
+export class ExemploComponent {
+  public readonly icone: SafeHtml;
+
+  constructor(private readonly sanitizer: DomSanitizer) {
+    this.icone = this.sanitizer.bypassSecurityTrustHtml(cakeIconRegular);
+  }
+}
+```
+> **Nota:** Por ser SVG inline (string), de modo geral basta importar o icone, atrelar a uma variavel (para ser usado no template html) e Sanitizar para aplicar no `innerHTML`
+
+## Licença
+MIT © [Iconis](https://github.com/Pdro-marqss/iconis-lib)

package/dist/index.cjs

@@ -20,7 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  cakeRegular: () => cakeRegular,
+  cakeIconRegular: () => cakeIconRegular,
   handCoinsIconRegular: () => handCoinsIconRegular,
   refundIconRegular: () => refundIconRegular,
   refundIconThin: () => refundIconThin
@@ -28,7 +28,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/icones/cake.ts
-var cakeRegular = `
+var cakeIconRegular = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
     <path d="M232,112a24,24,0,0,0-24-24H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0ZM40,112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v23.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33Zm160,96H56a8,8,0,0,1-8-8V172.56A38.77,38.77,0,0,0,62.88,176a39.69,39.69,0,0,0,29-11.31A40.36,40.36,0,0,0,96,160a40,40,0,0,0,64,0,40.36,40.36,0,0,0,4.13,4.67A39.67,39.67,0,0,0,192,176c.38,0,.76,0,1.14,0A38.77,38.77,0,0,0,208,172.56V200A8,8,0,0,1,200,208Z"/>
 </svg>
@@ -54,7 +54,7 @@ var refundIconRegular = `
 `;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  cakeRegular,
+  cakeIconRegular,
   handCoinsIconRegular,
   refundIconRegular,
   refundIconThin

package/dist/index.d.cts

@@ -1,8 +1,120 @@
-declare const cakeRegular = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 256 256\">\n    <path d=\"M232,112a24,24,0,0,0-24-24H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0ZM40,112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v23.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33Zm160,96H56a8,8,0,0,1-8-8V172.56A38.77,38.77,0,0,0,62.88,176a39.69,39.69,0,0,0,29-11.31A40.36,40.36,0,0,0,96,160a40,40,0,0,0,64,0,40.36,40.36,0,0,0,4.13,4.67A39.67,39.67,0,0,0,192,176c.38,0,.76,0,1.14,0A38.77,38.77,0,0,0,208,172.56V200A8,8,0,0,1,200,208Z\"/>\n</svg>\n";
+/**
+ * @description
+ * Bolo de Aniversário | Regular | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { cakeIconRegular } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeCake: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeCake = this.sanitizer.bypassSecurityTrustHtml(cakeIconRegular);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeCake"></span>
+ * ```
+ */
+declare const cakeIconRegular: string;
 
-declare const handCoinsIconRegular = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 256 256\">\n    <path d=\"M230.33,141.06a24.43,24.43,0,0,0-21.24-4.23l-41.84,9.62A28,28,0,0,0,140,112H89.94a31.82,31.82,0,0,0-22.63,9.37L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9ZM164,96a36,36,0,0,0,5.9-.48,36,36,0,1,0,28.22-47A36,36,0,1,0,164,96Zm60-12a20,20,0,1,1-20-20A20,20,0,0,1,224,84ZM164,40a20,20,0,0,1,19.25,14.61,36,36,0,0,0-15,24.93A20.42,20.42,0,0,1,164,80a20,20,0,0,1,0-40Z\"/>\n</svg>\n";
+/**
+ * @description
+ * Mão com moedas caindo | Regular | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { handCoinsIconRegular } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeHandCoins: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeHandCoins = this.sanitizer.bypassSecurityTrustHtml(handCoinsIconRegular);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeHandCoins"></span>
+ * ```
+ */
+declare const handCoinsIconRegular: string;
 
+/**
+ * @description
+ * Simbolo dinheiro circulando | Thin | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { refundIconThin } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeReembolso: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeReembolso = this.sanitizer.bypassSecurityTrustHtml(refundIconThin);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeReembolso"></span>
+ * ```
+ */
 declare const refundIconThin: string;
+/**
+ * @description
+ * Simbolo dinheiro circulando | Regular | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { refundIconRegular } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeReembolso: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeReembolso = this.sanitizer.bypassSecurityTrustHtml(refundIconRegular);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeReembolso"></span>
+ * ```
+ */
 declare const refundIconRegular: string;
 
-export { cakeRegular, handCoinsIconRegular, refundIconRegular, refundIconThin };
+export { cakeIconRegular, handCoinsIconRegular, refundIconRegular, refundIconThin };

package/dist/index.d.ts

@@ -1,8 +1,120 @@
-declare const cakeRegular = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 256 256\">\n    <path d=\"M232,112a24,24,0,0,0-24-24H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0ZM40,112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v23.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33Zm160,96H56a8,8,0,0,1-8-8V172.56A38.77,38.77,0,0,0,62.88,176a39.69,39.69,0,0,0,29-11.31A40.36,40.36,0,0,0,96,160a40,40,0,0,0,64,0,40.36,40.36,0,0,0,4.13,4.67A39.67,39.67,0,0,0,192,176c.38,0,.76,0,1.14,0A38.77,38.77,0,0,0,208,172.56V200A8,8,0,0,1,200,208Z\"/>\n</svg>\n";
+/**
+ * @description
+ * Bolo de Aniversário | Regular | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { cakeIconRegular } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeCake: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeCake = this.sanitizer.bypassSecurityTrustHtml(cakeIconRegular);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeCake"></span>
+ * ```
+ */
+declare const cakeIconRegular: string;
 
-declare const handCoinsIconRegular = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 256 256\">\n    <path d=\"M230.33,141.06a24.43,24.43,0,0,0-21.24-4.23l-41.84,9.62A28,28,0,0,0,140,112H89.94a31.82,31.82,0,0,0-22.63,9.37L44.69,144H16A16,16,0,0,0,0,160v40a16,16,0,0,0,16,16H120a7.93,7.93,0,0,0,1.94-.24l64-16a6.94,6.94,0,0,0,1.19-.4L226,182.82l.44-.2a24.6,24.6,0,0,0,3.93-41.56ZM16,160H40v40H16Zm203.43,8.21-38,16.18L119,200H56V155.31l22.63-22.62A15.86,15.86,0,0,1,89.94,128H140a12,12,0,0,1,0,24H112a8,8,0,0,0,0,16h32a8.32,8.32,0,0,0,1.79-.2l67-15.41.31-.08a8.6,8.6,0,0,1,6.3,15.9ZM164,96a36,36,0,0,0,5.9-.48,36,36,0,1,0,28.22-47A36,36,0,1,0,164,96Zm60-12a20,20,0,1,1-20-20A20,20,0,0,1,224,84ZM164,40a20,20,0,0,1,19.25,14.61,36,36,0,0,0-15,24.93A20.42,20.42,0,0,1,164,80a20,20,0,0,1,0-40Z\"/>\n</svg>\n";
+/**
+ * @description
+ * Mão com moedas caindo | Regular | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { handCoinsIconRegular } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeHandCoins: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeHandCoins = this.sanitizer.bypassSecurityTrustHtml(handCoinsIconRegular);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeHandCoins"></span>
+ * ```
+ */
+declare const handCoinsIconRegular: string;
 
+/**
+ * @description
+ * Simbolo dinheiro circulando | Thin | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { refundIconThin } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeReembolso: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeReembolso = this.sanitizer.bypassSecurityTrustHtml(refundIconThin);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeReembolso"></span>
+ * ```
+ */
 declare const refundIconThin: string;
+/**
+ * @description
+ * Simbolo dinheiro circulando | Regular | SVG.
+ *
+ * <br/>
+ *
+ * `No Angular TS:`
+ * ```ts
+ * import { refundIconRegular } from '@iconis/icons';
+ * import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+ *
+ * export class ExemploComponent {
+ *  public readonly iconeReembolso: SafeHtml;
+ *
+ *  constructor(private readonly sanitizer: DomSanitizer) {
+ *   this.iconeReembolso = this.sanitizer.bypassSecurityTrustHtml(refundIconRegular);
+ *  }
+ * }
+ * ```
+ *
+ * <br/>
+ *
+ * `No HTML:`
+ *
+ * ```html
+ * <span class="w-6 h-6 text-slate-600" [innerHTML]="iconeReembolso"></span>
+ * ```
+ */
 declare const refundIconRegular: string;
 
-export { cakeRegular, handCoinsIconRegular, refundIconRegular, refundIconThin };
+export { cakeIconRegular, handCoinsIconRegular, refundIconRegular, refundIconThin };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/icones/cake.ts
-var cakeRegular = `
+var cakeIconRegular = `
 <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 256 256">
     <path d="M232,112a24,24,0,0,0-24-24H136V79a32.06,32.06,0,0,0,24-31c0-28-26.44-45.91-27.56-46.66a8,8,0,0,0-8.88,0C122.44,2.09,96,20,96,48a32.06,32.06,0,0,0,24,31v9H48a24,24,0,0,0-24,24v23.33a40.84,40.84,0,0,0,8,24.24V200a24,24,0,0,0,24,24H200a24,24,0,0,0,24-24V159.57a40.84,40.84,0,0,0,8-24.24ZM112,48c0-13.57,10-24.46,16-29.79,6,5.33,16,16.22,16,29.79a16,16,0,0,1-32,0ZM40,112a8,8,0,0,1,8-8H208a8,8,0,0,1,8,8v23.33c0,13.25-10.46,24.31-23.32,24.66A24,24,0,0,1,168,136a8,8,0,0,0-16,0,24,24,0,0,1-48,0,8,8,0,0,0-16,0,24,24,0,0,1-24.68,24C50.46,159.64,40,148.58,40,135.33Zm160,96H56a8,8,0,0,1-8-8V172.56A38.77,38.77,0,0,0,62.88,176a39.69,39.69,0,0,0,29-11.31A40.36,40.36,0,0,0,96,160a40,40,0,0,0,64,0,40.36,40.36,0,0,0,4.13,4.67A39.67,39.67,0,0,0,192,176c.38,0,.76,0,1.14,0A38.77,38.77,0,0,0,208,172.56V200A8,8,0,0,1,200,208Z"/>
 </svg>
@@ -24,7 +24,7 @@ var refundIconRegular = `
 </svg>
 `;
 export {
-  cakeRegular,
+  cakeIconRegular,
   handCoinsIconRegular,
   refundIconRegular,
   refundIconThin

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iconis/icons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Ícones SVG inline (strings) para projetos web",
   "license": "MIT",
   "sideEffects": false,
@@ -8,6 +8,14 @@
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pdro-marqss/iconis-lib.git"
+  },
+  "homepage": "https://github.com/Pdro-marqss/iconis-lib.git#readme",
+  "bugs": {
+    "url": "https://github.com/Pdro-marqss/iconis-lib/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -15,7 +23,11 @@
       "require": "./dist/index.cjs"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean",
     "prepublishOnly": "npm run build"
@@ -25,4 +37,3 @@
     "typescript": "^5.9.3"
   }
 }
-