{"_id":"@azzabihamza/essential-web-icons","_rev":"1-1bb35a3335f652717af0986e9cc578a7","name":"@azzabihamza/essential-web-icons","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@azzabihamza/essential-web-icons","version":"1.0.0","description":"Starter project to build an SVG icon library","main":"index.js","sideEffects":false,"scripts":{"build:library":"npm run transform-icons && npm run copy-library-assets","build:showcase":"npm run build:library && npm run bundle-showcase && npm run copy-showcase-files","bundle-showcase":"webpack --config ./showcase/webpack.config.js","commit":"git-cz","copy-showcase-files":"cpx showcase/index.html dist/showcase && cpx showcase/styles.css dist/showcase","copy-library-assets":"cpx package.json dist/icons && cpx README.md dist/icons","transform-icons":"svg-to-ts","serve":"npm run build:showcase && http-server ./dist/showcase -o"},"repository":{"type":"git","url":"git+https://github.com/kreuzerk/svg-icon-library-starter.git"},"keywords":["SVG","icons","library","starter"],"author":{"name":"Kevin Kreuzer"},"license":"ISC","bugs":{"url":"https://github.com/kreuzerk/svg-icon-library-starter/issues"},"homepage":"https://github.com/kreuzerk/svg-icon-library-starter#readme","devDependencies":{"cpx":"^1.5.0","git-cz":"^4.7.1","npm-run-all":"^4.1.5","svg-to-ts":"^6.0.0","typescript":"^4.0.3","webpack":"^3.12.0"},"_id":"@azzabihamza/essential-web-icons@1.0.0","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-Gda1maGgoRgmZFZV4gthSL3JMBLWtJjU3RZp28SRAieE3cTFodzCu8nAlf9HS9PWKfYcrqQVPyfpJskCz0WRaw==","shasum":"86c09f3f1894d35586475aff5f60f5c709103510","tarball":"https://registry.npmjs.org/@azzabihamza/essential-web-icons/-/essential-web-icons-1.0.0.tgz","fileCount":768,"unpackedSize":640330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9UG7CRA9TVsSAnZWagAAXTgQAJubZJu164FCDfZnL9ex\nUkA8/oFodP1MAytcEnQDH60ICtAz3WT0cr06eiFTgLJaPpJUHqaQ4A/w0vaq\nPtbyIlSG5pcdjQzHx16WrFZkjyqjwu0fk9R4y0fOxiYJI0bxmp+5uPFUqzlj\nj+9//Sa/xV3+kEhaIKx9Jip4TzzoQkmyYIaNZwX01RwV7yruP90lJJEqXjN1\nC5/0e+ZMMrgRAnscfS/ewYqO4M4vx38G0nLPtGzaIbSKuP1b61C2bdow7D80\nGCbMNSWsS77ccK8aceQBqOS9s15rF43LcQ7u4tLO/tUEpGHTN0bFe5mYRdSF\n6QiMladgSuTZT/S/9YsLYHEoju1GXjjj1Iy+PFwDL78oA9EhpAhi27DZz7rL\nJPbpFlGQxhxwgmzqjyLt7zHlsWTxZEJkWskIbn8mBqm91ALHZ4uS1HmhCzZp\n5/n9XyxcMo0nrtEO10UOf2llka7VSYC5zPvTmtjvZhZqZPsDgSMdKWI+bol/\ne3OJvjPxf+lOv/J5eXKzUR43qERAybfMNTXPsz3GF1hGkh0L2lEGy6YbcWVG\nhz3942ij6XLddPTUlJ482mWAbfo3RByk3aIoaax3ebjmBGM9DEReMSmzxahk\nJT/WiN4zS0jduDpaAsG0Kb4bwyNPQjvAOwf3Yw34fKawzYYVOgSXnMlooVnL\nFaqW\r\n=fcsj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCqCxTuUtLIeGhfHDRoAuKzWbVUy+ZoFa+jsDdNOrHSAiEAu/NXj2PxAgg6XrUvMnABg/tmqlua8/A8MnFOXlCXJaY="}]},"_npmUser":{"name":"azzabihamza","email":"hamza.azzabi@esprit.tn"},"directories":{},"maintainers":[{"name":"azzabihamza","email":"hamza.azzabi@esprit.tn"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/essential-web-icons_1.0.0_1626685883357_0.28692913895656824"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-19T09:11:23.319Z","1.0.0":"2021-07-19T09:11:23.570Z","modified":"2022-04-04T17:23:14.653Z"},"maintainers":[{"name":"azzabihamza","email":"hamza.azzabi@esprit.tn"}],"description":"Starter project to build an SVG icon library","homepage":"https://github.com/kreuzerk/svg-icon-library-starter#readme","keywords":["SVG","icons","library","starter"],"repository":{"type":"git","url":"git+https://github.com/kreuzerk/svg-icon-library-starter.git"},"author":{"name":"Kevin Kreuzer"},"bugs":{"url":"https://github.com/kreuzerk/svg-icon-library-starter/issues"},"license":"ISC","readme":"# svg-icon-library-starter\r\n\r\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\r\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\r\n**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*\r\n\r\n- [svg-icon-library-starter](#svg-icon-library-starter)\r\n  - [Getting started](#getting-started)\r\n  - [Delivering the icons](#delivering-the-icons)\r\n  - [Consuming your icon library](#consuming-your-icon-library)\r\n    - [Vanilla JS](#vanilla-js)\r\n    - [Typescript](#typescript)\r\n    - [Framework usage](#framework-usage)\r\n      - [Angular](#angular)\r\n  - [Custom build](#custom-build)\r\n\r\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\r\n\r\n\r\nThis is a startert project that helps you build your own awesome icon library for any kind of framework or even for vanilla JS or *TypeScript*. Each SVG icons is processed, optimized and build for static code analysers to enable tree shaking.\r\n\r\n\r\n\r\n## Getting started\r\n\r\n1. Fork this repository\r\n2. Customize the project by running a full text search and replacing all \"REPLACE_ME\" occurrences.\r\n3. Place all you SVG icons into the `svg-icons` folder.\r\n4. Open up a terminal and type `npm run serve`.\r\n\r\n\r\n\r\n## Delivering the icons\r\n\r\nOnce you placed the icons inside the `svg-icons` folder you can deliver them to production. `npm run build` converts all the icons to *JavaScript* and generates the correct *TypeScript* declaration files into a `dist` folder.\r\n\r\n\r\n\r\n## Consuming your icon library\r\n\r\nOnce published to *npm*, your icon library is ready to be consumed. There are various ways to consume the icon library.\r\n\r\n\r\n\r\n### Vanilla JS\r\n\r\nTo consum the icon library in *ES6* you can import icons from your library, create an SVG element and add the icon data to it.\r\n\r\n```javascript\r\n// Import the icon from the icon library\r\nimport {myIconSmilingFace} from 'my-icon-lib';\r\n\r\n// Query the element that you want to append the icon to\r\nconst conatiner = document.getElementById('.container');\r\n\r\n// Create a new svg element and apply the icon data to it\r\nfunction buildSVGElement(icon) {\r\n    const div = document.createElement('DIV');\r\n    div.innerHTML = icon.data;\r\n    return (\r\n        div.querySelector('svg') ||\r\n        this.document.createElementNS('http://www.w3.org/2000/svg', 'path')\r\n    );\r\n}\r\n\r\n// Append the icon to the container\r\ncontainer.appendChild(buildSVGElement(icon);\r\n```\r\n\r\n\r\n\r\n### Typescript\r\n\r\nThe *TypeScript* usage is very similar to the *JavaScript* usage. The only difference is that you have additional type safety.\r\n\r\n```typescript\r\n// Import the icon from the icon library\r\nimport {myIconSmilingFace, MyIcon} from 'my-icon-lib';\r\n\r\n// Query the element that you want to append the icon to\r\nconst conatiner = document.getElementById('.container');\r\n\r\n// Create a new svg element and apply the icon data to it\r\nfunction buildSVGElement(icon: MyIcon): SVGElement {\r\n    const div = document.createElement('DIV');\r\n    div.innerHTML = icon.data;\r\n    return (\r\n        div.querySelector('svg') ||\r\n        this.document.createElementNS('http://www.w3.org/2000/svg', 'path')\r\n    );\r\n}\r\n\r\n// Append the icon to the container\r\ncontainer.appendChild(buildSVGElement(icon));\r\n```\r\n\r\n\r\n\r\n### Framework usage\r\n\r\nThe usage in frameworks can be a bit more sophisticated than the usage in plain *JavaScript* or *TypeScript*. In frameworks we often work with additional concepts like *components* and more sophisticated builds. \r\n\r\n\r\n\r\n#### Angular\r\n\r\nIn Angular we want to provide a reusable component for the icons. A reusable component that accepts a `name` as an `Input` property and displays the desired icon. Furthermore, we want to guarantee that tree shaking is supported. If the icon library contains 300 icons but only one of them is used, only one should end up in the resulting bundle. Furthermore it should also support code splitting and lazy loading in a way that the icon only ends up in the chunk it is used.\r\n\r\nTo achieve these things we implement a `IconRegistry`.\r\n\r\n```typescript\r\nimport {Injectable} from '@angular/core';\r\nimport {MyIcon} from './my-icon-lib';\r\n\r\n@Injectable({\r\n    providedIn: 'root'\r\n})\r\nexport class MyIconsRegistry {\r\n\r\n    private registry = new Map<string, string>();\r\n\r\n    public registerIcons(icons: MyIcon[]): void {\r\n        icons.forEach((icon: MyIcon) => this.registry.set(icon.name, icon.data));\r\n    }\r\n\r\n    public getIcon(iconName: string): string | undefined {\r\n        if (!this.registry.has(iconName)) {\r\n            console.warn(\r\n              `We could not find the Icon with the name ${iconName}, did you add it to the Icon registry?`\r\n            );\r\n        }\r\n        return this.registry.get(iconName);\r\n    }\r\n}\r\n```\r\n\r\n \r\n\r\nThe icon registry holds all the icons in a `Map`. Next we build the `my-icon.component.ts` that will use the registry to display an icon.\r\n\r\n```typescript\r\nimport {\r\n  ChangeDetectionStrategy, Component, ElementRef, HostBinding, Inject, Input, Optional, ViewEncapsulation\r\n} from '@angular/core';\r\nimport {MyIconsRegistry} from './my-icons-registry.service';\r\nimport {DOCUMENT} from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'my-icon',\r\n    template: `\r\n        <ng-content></ng-content>\r\n    `,\r\n    styles: [':host::ng-deep svg{width: 50px; height: 50px}'],\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class MyIconComponent {\r\n    private svgIcon: SVGElement;\r\n\r\n    @Input()\r\n    set name(iconName: string) {\r\n        if (this.svgIcon) {\r\n            this.element.nativeElement.removeChild(this.svgIcon);\r\n        }\r\n        const svgData = this.myIconsRegistry.getIcon(iconName);\r\n        this.svgIcon = this.svgElementFromString(svgData);\r\n        this.element.nativeElement.appendChild(this.svgIcon);\r\n    }\r\n\r\n    constructor(private element: ElementRef, private myIconsRegistry: MyIconsRegistry,\r\n                @Optional() @Inject(DOCUMENT) private document: any) {\r\n    }\r\n\r\n    private svgElementFromString(svgContent: string): SVGElement {\r\n        const div = this.document.createElement('DIV');\r\n        div.innerHTML = svgContent;\r\n        return div.querySelector('svg') || this.document.createElementNS('http://www.w3.org/2000/svg', 'path');\r\n    }\r\n}\r\n```\r\n\r\nAt this point we are ready to consum the `my-icon` component. We first register the desired icon in the lazy loaded *module* and then consume it in a *component*.\r\n\r\n```typescript\r\nimport { NgModule, Component } from '@angular/core';\r\nimport {myIconSmilingFace} from 'my-icon-lib';\r\n\r\nimport {MyIconsRegistry} from './my-icons-registry';\r\nimport {MyIconModule} from './my-icon.module.ts';\r\n\r\n@Component({\r\n  selector: 'my-feature',\r\n  template: `<my-icon name=\"smiling_face\"></my-icon>`\r\n})\r\nexport class MyFeatureComponent {}\r\n\r\n@NgModule({\r\n  declarations: [MyFeatureComponent],\r\n  imports: [MyIconModule]\r\n})\r\nexport class MyFeatureModule { \r\n\r\n\tconstructor(private myIconsRegistry: MyIconsRegistry) {\r\n\t\tmyIconsRegistry.registerIcons([myIconSmilingFace]);\r\n\t}\r\n\r\n}\r\n```\r\n\r\n\r\n\r\nIf you want to find out more about why we need a registry and how it helps tree shaking I recommend you to check out this [blogpost](https://medium.com/angular-in-depth/how-to-create-an-icon-library-in-angular-4f8863d95a).\r\n\r\n\r\n\r\n## Custom build\r\n\r\nMaybe you have a special setup or you are only interested in *TypeScript* files and don't want to compile the icons to *JavaScript*. In such cases you can always adjust the `svg-to-ts` config in your project. To prevent the *JavaScript* compilation for example you can simply disable it by setting the `compileSources` flag to `false`. For more information check out the [svg-to-ts](https://github.com/kreuzerk/svg-to-ts) docs. \r\n","readmeFilename":"README.md"}