{"_id":"@best-it/iconly","_rev":"22-9faf0448c662d908f91e4f4188fb22be","name":"@best-it/iconly","dist-tags":{"latest":"1.1.1","beta":"1.0.6-beta.8","next":"1.2.0"},"versions":{"1.0.0":{"name":"@best-it/iconly","version":"1.0.0","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development"},"dependencies":{},"gitHead":"6dc70e654e1e6c605b0c8793c43f9bcc64800db6","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.0","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-pLRIGwK6X4/UXwy2TNHUUokQD2bCgUvMkg4YLyux7XRTVjkvz3ViactiZ8D4zp4PUNVggjKG+68ISjdvgOGyXg==","shasum":"4b6125f15859e3e234cbe3ed6c46ec083b5f354e","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.0.tgz","fileCount":3,"unpackedSize":10799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5rZjCRA9TVsSAnZWagAAH9sP/1rcyKTbjJXu50q2rAsY\nFALhbiPto4xIGKVLIM8k51HO8ZdZqHkyUnRvexAy8b2gsheLwDYQRlhK21In\nUAQfZXexgOC3ojpXzTAeubkKZwfb3tAW72N9T/ej1Oa4PL7Y89Wnr8a2w26I\n39WHAVoJqqr/wOfQgrP09lphFnUEA0Ei7PPcIs3fAtS3MKBqjveHH98ef4pH\n+XquSqdYKw7WMOKF8dcKmNrl5Y38a8D6MQ2dKepnHh5uPWHkRltt4rs/QCJ6\nxnW+NO5EM1YiusBjQHZcZK2e0PypmZ2BxFqecnSKswcxr1iOGIyVwMLpDdRz\n2yBbW6d7cURyXVyeqNq7HUgosu4tbLhaNZH9obqPx3yOtiF8cQ7VBcN4nINn\nr8hw06y3UURNZbProRVV8540HqpMflgFinkVXVa6+01poNSOp8pP7aqaK1+Q\n9ZXHihX6/01XRcauRMHCkQge8YYi8MTEWUCxe8uCqjTQq8ouw1CaHzGSQF7p\njKuiXXCQfru7UpG0Kl/4GOUoBgxkeJch/2V2+iIML9ANsVXhDthbaZxqDYS8\nICN0If9blNUPhQ1bb/VHCBb7hUzJd5jzhKxIqYZQ9HiRmAL4ZXyGZ1+nKeUJ\nmX+CumzIgfUiZOXxt580VNcbpZeOopIV8jjg5i7iBAmhaUA0BS12tbHZzDVx\nSYUx\r\n=Psoj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsVfMYSgbdmViYaVHIsmxUDnf2D2PUWAi8U6wtD/6e8AIgKBWq8zNmA1zx0a6Z2IGDmoBySuta6m8bis7tjZ30Ggs="}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"s5nw","email":"steve-weber@web.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.0_1625732706648_0.07699671730045266"},"_hasShrinkwrap":false},"1.0.1":{"name":"@best-it/iconly","version":"1.0.1","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development"},"dependencies":{},"gitHead":"d5c34626fbaf565ebe530ff03ee57ec9c4574087","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.1","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-XVjjmwHUqLqDVR0g0YfNf36CLoE+lcXQcBAT9HZM8eCtjOhfPBbXls7jEKZjMAAkr735b3IC/hCXTW57spl0iw==","shasum":"89376fbffa1edb236a0539ca9d41578ff6a7fe8d","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.1.tgz","fileCount":3,"unpackedSize":10804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5vfuCRA9TVsSAnZWagAAsH4P+wVVbDbosQCDiEOybDXJ\n0hrHJhA2b90jEe8XBj7qHxiWre+Fh973M9i9OrwdvfYdb3H326y5OkvI61+H\naX0iiRdWj963pz+ODcHeL7COthaD3sZzZgZ8Q+1PcSrQmCcAwv8xhoWCR7WF\nTBXc0eYdro5+VEpyQb78eRqC4fRfEGSCUfG49qqvDi2k8LmAPJoDP6FLRL6N\nV9hr1YvLMsEZYtAM5AS5f6IlHgOYtT51SoxCnE94dtpTTAgWy5JcDfWIU3+w\n2PwfvGUtt+jh58KorWKYXR7Miye3n+AAval+1RuJ3xAHij+JVV1CnmVGO4Ij\ngaoWiSXQ7SXJSzTGgPkVK3J7mC7qRKNWSuJyrU3MVuZWlFMDJWjUy1PaP67K\nPEGRmuvUqe9Ci/bLfnEw98vOAlmNRB9u2iNoaib/I97A1+IrHLx56lSyaWf3\ncERWDfIUeJQdx6MNDLV85py2KcEednVd+QQC5kAJ4MFYFd3U9dmyWwwVBuvO\nsLhMqfsOvYAt/cMoFHw2n8W2Kbrmt8kctcaIJibbWEMSHwr6UqwGn8zNSxCw\nu9Fvu+gJxpkXCmq9sE3+liWMP6eRW3aZgm02F3vGFAW0yTms3Rh8cLcCfvne\nFqhh+Ey2+TS0N5glodmKDLrABEOEHle8DV+XUHy+O7zh0Rmo1upjlLDRecuN\nWgnr\r\n=zkwb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCC/MNWud3Xm/1GY00VhHe18ykBbaiX5+8Gqj1ytODWQAIhALUq7VHh68XzaBJwsQTYNlPaKGhl1N9gY6P8x1UGBjcw"}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"screeny05","email":"sl@scn.cx"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.1_1625749485652_0.755496500882203"},"_hasShrinkwrap":false},"1.0.2":{"name":"@best-it/iconly","version":"1.0.2","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development"},"dependencies":{},"gitHead":"0f99a6d7a6cf19c771ec96ca005a2ce34e0ae3f1","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.2","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-DHvEGDa+uQFXBYZ7tJhFnn0bA8akpI/B7qZvEm+U50iRKxmDelEppMlNEjzmsrmHbZsnG11oGRTAsfPAEK6xYQ==","shasum":"30009b4ea76a38c28256f8b19e51f096b8ea7749","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.2.tgz","fileCount":3,"unpackedSize":10822,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5vlUCRA9TVsSAnZWagAADmEP/2J4w4vygwoAZDyi18xX\n4PUJ0l9al6AwkMx8My4NljjOo1l5A2x5DXl20SD09KXKkncE0fk+fC1KGD2J\nBbDBCvC5PJ34lnUjw/MKSrIVFJeuRZPs9tvYNLtXWKMolXeTCIa8J7FN6tRS\nZBt3/5TmBrIA0c7VrMGW1d6Ch7EePXnx8DTJckHJNz0yRqqB1c5XP1Sd/qjR\njdtRDPpyReJghq7Wz4o8Dbdg9sP5VphlY+GM/zV/yC8jzZmjRXHIyV57QEgZ\nvGcrzTPTxwujUUiVGcHMtK+QAwsyeGpcZzcn4aj09UaokfnEjQ/6CwDdY4K0\n4tsBiPoJaYxr0xwaVgToEvxhmL3WGR0Am7C2zl9ZCYs8uUr+Elye1G1Yr4yU\ndrPQIwTVKx39aZGNaX4sPrHuMLMyldqpG/3Qhw8sW4HtQLMEJcjwghq22XhO\nRXOsjNIbWvh1DJYVXcUTso9Dg94ffSLz/mv3yNQqjyhDaBaJzkrWFj/4BklJ\n2gJoZpFHJjfhd0rngyEhyayQl+rysAq48PmXXlXMOR3PJfYRFq/GE+4dNWVA\nZLXWv55wJQxY/+Wfpk2vnvQSVrogDSpTg41jIAvaPak8oSe3NOjrQM0g0cHe\nrRpPArsG80w9R3GsQN61tKwNl2IUBW9QljA5CLFVHmzF8ImnFwH3J3/XSiC9\nqODn\r\n=jnhg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFR93JUIEADwfl590yQZJSzoxjP9TO116yVB9l5ddsVwIhAN3YiAYNYEg/nStndNp80tN7CjjemPzHV9XnXQYavVAl"}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"screeny05","email":"sl@scn.cx"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.2_1625749843816_0.8017967911244019"},"_hasShrinkwrap":false},"1.0.3":{"name":"@best-it/iconly","version":"1.0.3","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development"},"dependencies":{},"gitHead":"cfd3b37084baef3aeca2c29b405ac8afc56a56b5","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.3","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-XmiSuR76WhBNKdH+ZdpdCC2dh6UX46+rtumowiioSaqnI9HRM91wA6oa9Oet7KQlBFG45MpsP18CbzGwHhZhug==","shasum":"19997fc5f22598eeccc20a8bb0cc94f167f3d526","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.3.tgz","fileCount":101,"unpackedSize":317191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg59rlCRA9TVsSAnZWagAACj0P/AmPY5Inm4KC0LKCe1eC\naQ37LAoUHJf7r5Pz+ZEAs+wFCqnOnPtE7bc0Bc8GIqw27L47uRxaIEhLZ0dU\n5JUg8murnkLvIXQlZm/Nkb7HksULV4o6A235EZ3J20JbOJMJVjWfedFwUwwl\nL9AUsB4JD5/ZSnnVY81CEF/luwHZqR5iAsOaIuKQhSMS+sHBcopxH720alTc\ntahjm+3uhs/GwQ/fHqaBKSvNIMSUrGr47al0UNGUMoJmTNH10boOXlX/exay\nlZV5Wq6APDwoxAJG0ue5A8xckOO+j/HcReqJI5+bJteyEZkD2PCbM0+a9vn0\nTd/z/u0L6huyeGU4p1ZOse6v/b9LIfwh9KnD/O1W0Bs6mlaY6Tzfep2lTkkz\n2FQmbiglbOpsqpdq9brRAJJw9uu/dhu9MrhzbEj4gSzV588a0NozT1qVMFwc\nn5yh1/ZwKaIUnxnSJfa24KIB3TbkTTUVCnzPBpF8t5qX1cBFCyCyf62mfQyJ\nyJzcbhEi7tmpq3fmpnJX2KdhXo8wZXvrfyxlC4zjLtsGEreyDUBgFjy1+0Ag\nNFwVCjK8TaPEoeZlQkwqlI0eFZ6xj71AWwflHRhxHKDQgM6kok3YYq01aJh9\nxPjcdpMCmSrcdi1TUzk0ikf3CQ8IoYZj1VXTZVLVNMgfzhZTZvZZFX+3GMUb\nTM+/\r\n=GF1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBljaEPTB1oDnK/8lwr7riNav2Rja9b3ED8xTkMLyj15AiAuHI3E5m7VriCwO2u+kzB7ixElZmpXy2Hhzlfh/6eZcQ=="}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"screeny05","email":"sl@scn.cx"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.3_1625807588869_0.5295453466625866"},"_hasShrinkwrap":false},"1.0.4":{"name":"@best-it/iconly","version":"1.0.4","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development"},"dependencies":{},"gitHead":"987c4f32b6a98091cc6f4d2d0a1c1e53d52df39e","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.4","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-tZ49SHhmJcorwR6FwUt/Nos3Z1l8DiQbUPWQNqpXy8uFgVKmh08XAoynIZS4tEWRuqFrmXjD+aQ4+og9i/98fA==","shasum":"22c876c9740588d3d949ebc94272a9fbf7ecca21","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.4.tgz","fileCount":101,"unpackedSize":318438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+B6OCRA9TVsSAnZWagAA0a0P/27Pb9x567YTzO6GcZze\nnQO5r/GVl5Jc5Ptw98ZipuNClgZ1bjthwGTdWwDxIq3CmRZAeqydhjUDwh/G\nAWNgyjLA1pgSAJ9HEQKBqSxmlpM2T4+AAZePk/hxBOy0wk8xWGzapO13ioE0\nm+D5ec46guhokcFRVo6Gj6jlVZxYRPkEdU6mjOXyxzkbmDznmSv4S7rOYWoJ\nCfXy9g32kFCN9iyq+q3VY2tfTgYQxh3piaN2Cz+IvMuyX9StSe6Gzpu8nzsW\nZPQsbZaTIIKedxsJ16fv+FET5bxlRxrXwFLMppf6OgfvbetFGymrpDe0DZIv\nmRToyhheUgkRPuDgT+tGQhW3k0oLrYs9bIV12T3godpxqPNO7Es3oN0qNDXQ\nUBAmjd01NjOfKqQDKVV9d4vTitf1kT5yeMZzE0RtP9zmZityFgAlCRembt5M\nPvS5sIXopyBBsomIEzcOSIT1uUfKQUcP6UqXpDGumpt/hzEo9WIpvi+hVqMN\ntYzPK+oeia4JVkoZKoqKsVbG7fzZXSXKbrA0JiazWgVy3i8pNJ5fwOxN6vug\nzNkmfyErtHAk83LNJUkHomt+PPlrLlGUGix0Hz4Hj62UB/N4Icc2tHtBo/wV\nXVmgO/Jl9n1f9wEyOKSp/LDAIgeA2ppJv4pgcqk1t08nGhLqR/LVtDT8psPB\nRV9I\r\n=h1LV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1TZGb15LKTLop6VMHcNMX+Or6WsdfU8K2W3zXkJJo0gIhALD7DSobiYDLxKFmLXi0JnQeKRYmuUi1IHWXaqfhWvDE"}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.4_1626873486449_0.944089272662457"},"_hasShrinkwrap":false},"1.0.5":{"name":"@best-it/iconly","version":"1.0.5","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development"},"dependencies":{},"gitHead":"350f5b1a2592367390b32e68714180e38f2eb252","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.5","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-fIpLfCP9KxI1Aahl1s4iOYz0bz8scvJX0e0cU2FWzxYGGcMSsaxVro2FYV6lj/ko5zh5A/Cf0y0i8/E8XNZTOA==","shasum":"09e2807667464fd45c2f93e18082bd48563a90db","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.5.tgz","fileCount":111,"unpackedSize":340921,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+CHhCRA9TVsSAnZWagAAQhgQAJrh9NKgGDOJtBs+y7As\nGBkDUHqNYEanLE6DYKQMnXyE8WekYGKvZNUIpApCyy37ItMaY4n9DcpyTB4L\nkp2Ifzw168GnrXNLamxrxOWdW2pXmcxXFSg8MuHaqaEtAGrJY0aVhEXzgxOI\n+WGPIJTbnakyJZ+fNhl4clAh9IRYqzlqEECAvDELbonyg5S3okbyx5ltbqjZ\nhMqQ6CzFuxphaXDjWnd71KOv1iX53jnU/dlg6fNmuQS7daSYwx6eLyH0T8B2\nnR5JBFQ6PBG6IvyOBhno1ZgOlTB19I6nBbljlN1nGfP3bxqqQ9hU6Zxe7uKR\nIqgZr3bdA6Bn7UYRnHIPHiZhjFWvX3Vqcj9tiXVsuxsQ057KdiJdkMfXbBjS\nu8NY6VHwPmePWoH9DNh6WIFIulMHnFF8F20bsN3z61j0qdZhD+pq3uig1Ct4\nCGa76zi5Hen9FKA11zkbrmzBJewVzcgAFGkD3CfsDj/rJNzl8eoaW/Y8BOeW\nOHPjvDJS901ld87mX+d41fL+nnnQjxQRwpeSIVh+yhpfz9q9XQg7qWWwUoYb\nrzUEy/NvHIHN+a/bnSV8QRw7n2o8jeJRCYIRqnlweBKg7+XAS/mNUo0xd2B5\ntZ52DWsLVx0rq0tSHg4ndoGy7ci8rQW/geOXTHtBTTlM+3piRFIhnctNEZ0H\n1CUA\r\n=tmpp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC/zzRtgZcVzsgbOeom7mg3WauvHF2H8c2QTueNJQ1L4AiEAmjUzJ4WftPPM+CeRj/d4VltvUFiZA738ADvFcULTR5k="}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.5_1626874337137_0.010624499751373362"},"_hasShrinkwrap":false},"1.0.6-beta.0":{"name":"@best-it/iconly","version":"1.0.6-beta.0","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"c502bc8ebb1ae3790966ce1404e814baf085d3d7","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.0","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-cAPQi29L2ywD0b6C8n/JkLCxlQs5rpsnXjvDxWgtK1+W9nXA/WbgyFkUhKsHgMyhwrQ1lhbGp73sMrPIccPKsA==","shasum":"4392c8ea58dc2e189bd1de40e1bdd6616333d9aa","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.0.tgz","fileCount":111,"unpackedSize":363297,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/nI+CRA9TVsSAnZWagAA0DUQAIm5w6YL7KvQr8jRHeC7\nNMP80AYfM+Cb03wLKYkMyAG7BNPRcnCxBFvVDHCyZubbpd4A7NWy75KW3XrQ\nNS5Ua3anoMQM4vciFDoJ6d/NHqZd7G0Uecr6iRegOSP7cdSyaI7DTU9dm08m\n1LPRyCSTG0wFnL650kLMi857AB0UOquXGxZQ0NZ37FcfKSSeLNLCZe3JwQzU\nPhldOmpoOGo/OQuODPZGxMx5H2rZnedRzks5eWg7xTXNHOwIkAr4Kn5iiZBV\nLXAFyUMgUHC4QGuaow04DABqCp1JJXp28i/lJujGotNHzbtSwZjN/22qehAT\n7LpT1lXhHPgrjyrBt22TNc5jZY66+Sm9i01vKGahSbJ6A+D/rpiheo0XxSQx\nUTwxYw497cHSB9My3j2jvKjPpHL6MpMrQeC+5Er6vqME+xUzvNaRhxkLaQv4\nYVGl+jRuTmUU+QYWJ7zeh1MMImQgq0+1L6K4Hl0VYezerIcmFgtvQY8KLheP\njPuDBvFr3cjJN9w810rItGxVqSadVPc9HjLgOfJpL+vmHu0SpyMboWtyIKbH\n3057CGgC2q2DwOjmVCGfKDKqth7gnkVz4Kb/nyvUqXWUfXeohxStGRA7kFjf\noOvJUk8SDR3F/JUlpJAN+pIvt5Q5h9Q1iWfEdfqgicJ5Ydw4PokgdRE0oIEb\n1bEk\r\n=zgoW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+qw/J6IUpbe/pJHHhdcMvXimDR0f3UOVbuoH8HtgsDQIgFqnLpbRGdA7kQok+rxfL2JXObgKXVK9sy+IXy3Iwq6M="}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.0_1627288126366_0.7428998503661635"},"_hasShrinkwrap":false},"1.0.6-beta.1":{"name":"@best-it/iconly","version":"1.0.6-beta.1","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"0bb90569d86d4c5f8e6ac661d7b16ef3b26f617b","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.1","_nodeVersion":"14.12.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-hmHcTPPvTLLIZkkGFJccQxv1Ni2qE+UnFrYmTea64lPzXg851sCyO25zgRJLmWPwxEkShehl8uJAYvOx3khciA==","shasum":"9541c5e74b207bb4dab0f14ef26ce5b6d05b792a","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.1.tgz","fileCount":111,"unpackedSize":373096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/od2CRA9TVsSAnZWagAAb6cP/2WhtrlBEEovrPAbKoj8\nCHI5/o5TzMqDkuatAMDqGssyV/DQaLAtiB3GhIXBbIudpPWqoav+qFR7X3km\ngRIaniB2BDwnNeFdsPT2sHNyYdR0Z4Gf/b4QkGChLnHs/8vinppWaMu1Qk2p\nKVdvyEdMwIGI3cZLOgJuOS8fPhPWIXyrLvKGOkGCL7qo1l2MxELoT0UlUsnj\ncZ8C4TuWQ/gSJAmog0Wsuq23g+K5dSCXx1WCwj7H+KHsJ5HUKAf88gMUAiuQ\nUS1TPPZB6Vik0hJF8kEyd7WrJYxczCoL8GMgU5HC2O5BhmS0WBNUyv6aXlze\nZVeST7ihqvZLwX7Npdm0AKpr1ZbvIXCJB2TP/S/oGAyPoW4n4euxQFT7vXGl\nRqPgGdrtBU0dHRw5dI/W+ARxFGm2L8Ou1M2VOHAJhXp8/lX2/iGApCjaMP7B\neC4mJbi2EeYgvO5teCRmGxl6jJycD3+3xAu/khc6TW9yYNHw3L+X8piYSEh/\nvBqQrYHWbJC7ebDauxIU8zyKCX3DNSwhh5sEiB9f2KCISWZ/ysEk3m1sVdxf\nafRfjxIXM2jfdxpgz/DvjNBmVSEABxjrOMIuOP1Cm1vOvN3E0qns7MUaCmVc\n1WqhACJ0LsIG1uW3rR8MUxS37QsCLH09hoorgzMuwCvRHGh2MK2QKVDjFSzR\n7JUw\r\n=KJLm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxjCrS97KwEImHZCPJ8PA5CWHORmQ0kv7lajxJKLqXGwIhAMk+G7+kbZdJA9bzf3bPrFHh2raaQuPcjU8WOVH0Ha+q"}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.1_1627293558238_0.5691591834200798"},"_hasShrinkwrap":false},"1.0.6-beta.2":{"name":"@best-it/iconly","version":"1.0.6-beta.2","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"803f08721f6a57bf18551b9da5778b5eb4fe9df0","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.2","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-GObEftITYcw/8TG+V5ClIDra0ljxxBVyB/UAlZJ7pXY3D/WrGN5Kt+qyMAbvz0Je9Qeh8fPw/w2KgM8w2Lgl5g==","shasum":"67fbcde77bf7b3b2a96d1f09a9d5c83bcf84802c","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.2.tgz","fileCount":111,"unpackedSize":370541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/qjrCRA9TVsSAnZWagAAXnkP/Rmr62Nr8hiNyWF+Fwpp\n1ADRY3qirgaeDbNKFbMLVRdwIlSEcq1wOX6Qiu2SWlXvWruEY43wyuh61Z+J\n902otRVex1Aul+M5L5cMcu4c76i5eswSkDfzQGHecMgv0sFHPUScBbsDeHWR\noMp0jVNptXvpIY7H8cgnP4N/hB8YUq0rDEYdyw8046fL1aIS7VNxbjg5r4fs\nQ88ok1e59qDpCZ5T3b1MDdkx6vCtb91VO/iRvO9DgdUKucfTNebTpEa94C0k\n25aeWmSHKKgXn1gIuhdrIjo69pLjv0fpBkLlHxKzWKEWNRXdfDdYt1ROJ6Hq\njqus8jdIJQ5vfRVdlhqU1qCJssGtPZe2Whmcom7ia97RJNU5QkhW8FR+WmQb\nQdgYWTPejxgFLIHBjvKQCiLip9/sbvvYNGyFYRBVeWUhmQMoFv/ozYug31cm\n8CNg6N8JCWrOvXaSAD96IP8+JcNpaWtkCwe9l3dAelz1M4xoiD1zGz8Su8tD\ndmEOlnOIt0L8FEVXc3LVULYzrkDqwN9p1Q9BPDRd4Df7bH5QWEN4AIKtw4n/\nGGA1HJW5SbcM0x5HgFHsyTbIZ8ovRjuX7tsArqNYeyZ8T6Qp8Wmzv/QxKtxx\nLK0ELCpzvWeYBodY8ItnxbqEjkKCoIkYFUR/6YJun9ouSxGWOKymekfMeebN\nCD0y\r\n=Q1JH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEyzfxQJ3W/bzHAc83lW6oQY2Q0bxYvFXLWuJlY75utAiEA5E1cf135jidbIcEG4WJiauMHAN9jY8/qIIzPZHfGbvw="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.2_1627302123126_0.5835592174713993"},"_hasShrinkwrap":false},"1.0.6-beta.3":{"name":"@best-it/iconly","version":"1.0.6-beta.3","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"97b83bbbd12660715934a265196fcb1916eff4b7","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.3","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-wmqRtA8zvPGyYMGnaO4Dq+FAd0UbhWf2FurIiXOIbjmuYzEky3+TATbHQ1bT+FUH1uybCDUgkEtqcx0Pb9TXDw==","shasum":"fb8ba73e76872f8fa1969e80fa97591117a8d410","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.3.tgz","fileCount":111,"unpackedSize":370541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/qmWCRA9TVsSAnZWagAATjcP/3y5RhEEucFpR+Yf/S4v\nYY64AAUa5nKOKDlWFvzLiOLzpMoNYxa/OROBvqAzJ4CDF0ETDA+rsJUicwLk\nYCxT2tW0I7vd3tvxnsBE7AYlEH6VJt3gv2YLWNtEC5zKb0wAMXAndUDmJ3jm\nxT04EFBnAhqusbz+t+rkOs47kuhzRyFvfPZbOhDI+MPUbvaJLg05oCqlGo8m\ngFq1Nv9h69oOTlJlLtug/KLsdQB2Id2P9HgSOcL51m6Pysh7GXkTk3EiwSWh\nQpWsSLPgjXGNyB1BG7BbHkkc6vJinAbXKOqnSlLsvpYiNOjsRvt6EtwDYT9X\nxhiMJO/smERzT1DKQ/QXLDKbfwzz0PbaZSvk1eqlyCfJ/KfMh22UZqypO18j\nBydmsn49zVqUVjPz+ieHal1DkjV1hDD5pzCBkAuWSZdb+gHsQJ/ItmUh1w8V\nm73LwHKmznGc2OHfPBkNty3Orwn0pwxnuvEN9cmvANctK3R1O7IAewkJQRX/\nNTqHKjBcjwbyZfL7fB+k6inp4kg5bJTSglSKWVVDTl0jV7cx0VPer+Zhofh2\n0agc/2joa8KQYKzGqRxkRQeTej0ce+xbdcvaKd7ZRvNVUDL0cZcqxbirtnVu\n6aat2piv6HVdfXRNQoAaLWyXXYpVky1339DkZMNMF2VBlrVPRbdiPlEpZJBW\nmidt\r\n=suRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBu5ZvQxMm/IVWS4tpgq8QOxwjQ7fM90zmu6TE2ZCQ1yAiEAmzUJOaagSm65hX5ebzZVkDQ0/BzNLtRwFOGSOkVjydU="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.3_1627302294254_0.9316467361958294"},"_hasShrinkwrap":false},"1.0.6-beta.4":{"name":"@best-it/iconly","version":"1.0.6-beta.4","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":["./dist/esm/index.js","./src/classes/custom-element.ts"],"require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"f6dc151e4afd8328219bd05c42325f1644f5d6eb","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.4","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-9N7E1Sb08ZrD5ZbY270ZVN35LfM8Kgsf5bGzwWgR+TQBnJI3CjLBjGXbuuBW6PlW7Y83aZ5oRdR0oBt1LO8CBw==","shasum":"c7009de9a668ee00ca3fc5c0e74937e262762553","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.4.tgz","fileCount":111,"unpackedSize":370578,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAmglCRA9TVsSAnZWagAAKpYP/3bJjCd0mDzcrJBvJbp3\ngZZ8aCgsTMXjfzn7wDW/+4qO6NOxH5Ugl+MwphW4R8KwqVL2Ht+UnzJx8uVG\ncIq80q8h8TQhRlw4z4iH7pZpgt0Bp1h35x/9TnhAzqze6lAzv8LL/ac0j+Hx\n8ObjRAcVjZ6FIJesMJPpKN/8qwn2bwMk86lhRVgZRbihsA//C8EfZ+rVtYYq\nhZ5+HJJpwnk1AE0asvtIy3CVj5KPa9iOaFoqBLH6OLzQLYO3zAj3tmm1uinE\npIUAy6NGjgs2HwoC3YPohmcdh/gEvSLPv22q9pVz5U0KL6oLahBzVygkCD+V\nSX42Pa6OCQzCcqInrLDeBs979LWVkag7qGDcBfxPTsHO/WUWWkKG/gHnGs52\nj/f5l9GaFnPcv63M2TwgTrqwrMRHvsFvpDBNIHnBA2q0hbmpqfHXU5qaDbHQ\nH+5p7CE6Pl/6XmFf7G1fASnxFM4P6E9ezuwrsUc/7SFV6AgDAYAKpEjqGRUO\nXcpwbH5kiPqjSxU8mtrKBwNnYAYfmHCMJ8FNIG5pjuTVeNnCgRALbxRtQLbu\nl9d08lAAwwsqQE928qBNn1FZRmod7Oy7aGN1GBjyGsK1doJzu+w4U2iAn/kV\nm88WnwKUOc3BsZIlblBgU25jKr5Ip0FT6XPaqNs5P+bzUvxNzdXlLd4TYMAE\n2Hz3\r\n=6kQ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZufRe9dsNIP96UMak1s8JAw1l+vZ1xzRdOqO7dLxFXAiEA5K/561YqjlLnuPorVDILw2Cn7FP/l5GsoOBjQueluKg="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.4_1627547684858_0.29979248674816117"},"_hasShrinkwrap":false},"1.0.6-beta.5":{"name":"@best-it/iconly","version":"1.0.6-beta.5","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":{".":"./dist/esm/index.js","./src/classes/custom-element":"./src/classes/custom-element.ts"},"require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"7dbac2004b31a9499b57c2c74f3d6dce59d07ac4","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.5","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-QCoAFPueKYIRjoC3OM8/fhPc1jSaXIJ6aLhDXfDiwINeNn7zxPeCijQUpNB6oGW097qLI40M47ozIGWfSqVIEw==","shasum":"fc6193f7d8bb74d51e622dd5b9f64d6de0ccac51","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.5.tgz","fileCount":111,"unpackedSize":370649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAnJGCRA9TVsSAnZWagAA9OIQAIFnYxiTP3xxtJKLBfL/\n18DY8BwBa+qVKuhOXNpmHta17xBBDeP1JfgFt91FwCX0sxqW6ujFPf1/624f\ny+zKefQwiPM7Dx1v5VteMe9Wa2o99MtXAzWtAF5/AIfOuThc9X5djc679qlR\n+idLQWxoh+A4xEXHo33fiAMPcWDZJ3oCP1Xf8DZvUxLPWSy+c46KIh/EKwTS\nq83hSbWOxZd0L7/d5rZU8TuM9yF6/D2EGdd1fd5AAKnTS18jr+ZIP8C6U4NQ\nAm172Tv0IpnmL4dlCcgdLdFMUUiMOxeDyEHpNlCYH/e6qNGzZz+9MKapbdUU\nEd1lpXob2HW6qj7H2wLWfHq8RIlSUnJBYITNlNFw3mDZ/qwLU+CT1Jy1PMBs\nP5dTCQqanslDe87KX1OaOegwi7g709C6+WdxpAAPbn9ZNWZ5O2W+Nk9eXJql\n/9wzLGChDKYxvCI3fOUlOU82Vfz0Hwtnmsa4ZH7uGT7TUyTemGrYFTJxtjmE\nJd8/goEqdpJamsWL0yJwwi+k3Oaql9oGDTMBCFj7VQGFTD10lQjFxvzJ2fdU\nb/xioL5X4pxgAx9bdWOhrFrrIVAhZ67d+xZMBpcZ3BYNVMrELAvRLe+Dl5Yt\ndi5JOdxK7/tAHW109BQ6B1ysVQSYVq4chKarNDYDxYLh3pp4Jmkezc+jmIrr\nPYiT\r\n=UAKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBp2waJo/VdUIJtzPH3jy9upLoTPkgOju3pyZLyRu5U6AiEAsTP6z6G8alm3VVEM87Cs05vN+g5DRQ5wXEPwy5pBxBs="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.5_1627550278594_0.6438739071551343"},"_hasShrinkwrap":false},"1.0.6-beta.6":{"name":"@best-it/iconly","version":"1.0.6-beta.6","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"},{"name":"Rainer Kinzl","email":"rainer.kinzl@bestit.at"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"./src/classes/custom-element":"./src/classes/custom-element.ts"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"7dbac2004b31a9499b57c2c74f3d6dce59d07ac4","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.6","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-rh+kO6L5JDK4mLfPpVflP8lHnPEvWXMbM86myEoZxwQNmTObk6nC0Ct+X5xkwODfNXXGWgBFjgzlATaXH4tRxw==","shasum":"fa7c078fc7e1614200e4da246beac64c60890785","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.6.tgz","fileCount":111,"unpackedSize":370756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAnTwCRA9TVsSAnZWagAA+ZAP/0/XeGUyGnJhfYi/x/7M\n2I76zKYPkV0uLdd9CxuttqgDiCOpBqDgM/sEcoW84R1Fa58mdmFrupa3jQHf\nlg3hRhSwq48R4qHsvfljmc1O9X0fJIooMiw1gy81gsDPLrl5uKRiQUAHaZpj\nqyVlTBGUaVH+yafBgbaxH+HYE7WZ7ULLA8TAAYTGr/n3g9EHqg2QO1rtQ4ep\nOd78NurfHgoXzG0WbSuaTx8xnyrEwGw+nTKw4ulgaFG5J6xRrGYIU/mOPycN\nSq9iB4mK1DrGkx08G1Ou3bmADzBSfV6GjmXY0tRYckX/g/A+ZdzuKEFhF5Ms\n7jxqqJwZ49J/SXSB3wTSscNIa9AbBXid8ZZXL2dPscr9MrrXNNgWQU+Foqxk\nWVFbMVWYeDSoMy+dVGs9CDtsWTGOi7Y2TSjDDibME7M3F6msn0ik1HaWTEoh\nr5+NjAQpGkOxDl4rSYNBt6gKd8H1pumNMUoqqrJBWX1DHTDw5t413KR7eVTi\nTzEEAvO66yEdcr2eHHgP9gUl4nePxckpMvcEoQvseuj1QTF8G0djSHSdQw9N\n3ROx2uPfA6IwegzRe4cSPpNYHHCz38uKGKfClFhvxqG0I/q9ZtTZsfi17TCn\nyPYaoEaggJsF6FU7JIsoS58gDBYw3HHhVCdz5odTJQYK8FTna+PHzdzpmddJ\nUzE1\r\n=LCCD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMlqZDC6Qwx3o89dCC01Mt3/16/QrrgbXXUzVVoy8tRAIgOhR6xDfdWYa++NYAAVgHrVOeEsV3BT9hVkIjM7t7L5I="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.6_1627550960598_0.4375155334299743"},"_hasShrinkwrap":false},"1.0.6-beta.7":{"name":"@best-it/iconly","version":"1.0.6-beta.7","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"},{"name":"Rainer Kinzl","email":"rainer.kinzl@bestit.at"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"./classes/*":{"import":"./dist/esm/classes/*.js","require":"./dist/commonjs/classes/*.js","default":"./dist/commonjs/classes/*.js"}},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"7dbac2004b31a9499b57c2c74f3d6dce59d07ac4","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.7","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-IHv131UthAfJhYWdujkavv6GtESCFDqzMaj+Dcha9VJ9o0DwqUK8bKwJ67eyA+rZzac1RgHfpKme6k86a/qrcA==","shasum":"8017fd0550c70f8570119bba86fb618a768f7ef1","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.7.tgz","fileCount":101,"unpackedSize":346097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAncWCRA9TVsSAnZWagAALOsP/AkyFFZQ556yer4KWBOQ\nQaH9mPyng1GSvrTAe/udtTsm5+D3j7dfxRbgGSrIG4hra6c+DDSClMz/FzoR\nlB+L5IKpXiDedqhYZriNrG2jkdz8tknz2vBN7hGC7dKLkMUt0ctLpA3MUWAf\nGe8AXgOI+697dyZi356ze98hdEAkG10Essqt0RpaaMKfVExko45OvnkMH1F6\nRNPlkpSnM9b+rEjKKz2e78NA+ys3BmYKi2KsPGm8Z7I+ACMtlscJ53GoqjJB\n7FMgqqateQWhG+LhPt+M0hAysI4JWT/Zg5sksvVNJ/0lkigug1HRJJQqQMKd\nPIero+QVVMNRJ8/M00Fb9rnpsAq1Vjqwkft80j3i3v5GiqTDrP6xHuD8+LZ1\nZj6SHTOlgzrWVcdUXyXAUKP7MPuB19BHccmeN+Y0F0j8ZWmqBxJneKr6oQtH\nh3b8A1kZcOY7d6wHcnW4D8WWz13NUY2sAndnBs3BL+drbufq57oAxW/3aWk+\n1ryU5tNR2LwuyODJWIyYUHLpBfsjuOeiqUSxETPp7LEtZuhC85lpwRc327Ox\neagR2zjj7A7cUS2IRxrvNHgg81vYhb6WUKTkF2EyLxhkciVPuPFEVuZit8PR\nVGjDEo72SukVnPVcmS6NsQl7NkhXrU79CN5aiiSbAWkVGZCWYCaRmk9Fc9mB\nihe9\r\n=h6Ki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQIC1EaYUjQ8YrZuSPyvUuHGo4BsUXy2uASnWBNRWUdAiA4SaevQUgPJR23dp3Z5DdApKZgAYMHlDICOv8epA4mFQ=="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.7_1627551510393_0.3835031050730413"},"_hasShrinkwrap":false},"1.0.6-beta.8":{"name":"@best-it/iconly","version":"1.0.6-beta.8","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"},{"name":"Rainer Kinzl","email":"rainer.kinzl@bestit.at"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"./src/classes/custom-element":"./src/classes/custom-element.ts"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^4.2.0","@typescript-eslint/parser":"^4.2.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.0.0","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.3.2","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^3.11.2"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"npm publish --access public","publish:beta":"npm publish --access public --tag beta"},"dependencies":{},"readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"7dbac2004b31a9499b57c2c74f3d6dce59d07ac4","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_id":"@best-it/iconly@1.0.6-beta.8","_nodeVersion":"13.10.1","_npmVersion":"6.14.2","dist":{"integrity":"sha512-h+58QEj3+x2AQdLNSJPp9n+rTX/OMorh/O70fn/LxFqM5clkM+1fx1416MMu6iVCSlEjA5IQVSWPB4UoRVqMfQ==","shasum":"1c31963d93b84d1a68f9273b2158f341df980cfb","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.0.6-beta.8.tgz","fileCount":111,"unpackedSize":370756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAnmKCRA9TVsSAnZWagAAChwP/iqdNQiGYw9kGRtcoJQe\ntHmVE8v6lzUGVqnW5Judct4XvjxSb/SeQFXIKZQmwjP05U4k+vuSY5rZVfBc\nE1cEe2pv5BVkoAU0tQxIAFo190P60NpivFi6ecqUtVhbLrz3QQ+mcMMpDQAn\nKLKFk4PqcEZJpR4ywBD09iNCn8nn//8rh4oqGT9ZgDhASfyrZJmXPwdcgROp\nAf1pVCU6dh+EVvRL8kbCk9F9Q7B16y5/eexRt2KR1/Ii2MCXJRF8yjwSN+2H\n9VypBwf2P7q/mO8kAMQLaCpckhKdPFvNDq/hBP/wmOGT/+CYsavB+Rl+MxUT\nZuTimZAiv1NIJIju8NMO17WBpz/m2eBcU1bJzLMtjroFoSh5gJcQsxAnzPWk\nORtk9L5OLYrNxNWjo5R7TIvDFH28MqMbL9UHgp4o34HTriVywXsiBvV70nW1\nIssFBEEAfwjxENOtYJqucdDNUEo7ROpVPeekhqydzfy4kE+gZu/a+bI1Lfwk\nhT1JMuXjzjE0lVItGdKbwVrTYZGb0QPv7c54BkdjbG/0Obp4ITm917cOTLL4\nIG0QfV4DyHZGDErQzx26PwZOftkBRpTqGEL1ianCyeFLHBbDpVf4wmMGPrzP\n6JWyUQercIS+ErMMw7FmmFg3f1UL4vCCSpRa3OXtBM61AYbXVHsZmDHUgbnX\no/Xr\r\n=wMq/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7aPLLJvz9ruJAvBXLw3yHFiCZtcRvIG3xrR2LObuYhAiBzLoeyhxbAP3MrrR0goVhhjAqKpu7R3/cyDjxZYTMYCg=="}]},"_npmUser":{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},"directories":{},"maintainers":[{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.0.6-beta.8_1627552138634_0.016627267739205642"},"_hasShrinkwrap":false},"1.1.0":{"name":"@best-it/iconly","version":"1.1.0","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"https://github.com/bestit/iconly.git"},"author":{"name":"best it AG","email":"info@bestit.de"},"contributors":[{"name":"best it AG","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{"import":{".":"./dist/esm/index.js","./src/classes/custom-element":"./src/classes/custom-element.ts"},"require":"./dist/commonjs/index.js","default":"./dist/commonjs/index.js"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.1","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.6.3","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^4.7"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"yarn publish --access public","publish:beta":"yarn publish --access public --tag beta"},"dependencies":{},"licenseText":"MIT License\n\nCopyright (c) 2021 best it AG\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@best-it/iconly@1.1.0","dist":{"shasum":"9c764adc7e367af2e8e90b351d380d8ad327c583","integrity":"sha512-g2RLiJ4PfwQ3l/32WAF0wCwReWdEcHff9+JQChNaNjv75eRJNaW/QFf8crJfaA+4aTRoK6qepVNggPN/oGtcMw==","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.1.0.tgz","fileCount":134,"unpackedSize":386859,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHieRb9/g0dkgVH9AzHSDtf8lLS/LWhWfOI/gNJuhDDMAiBc+m1wKIw8W8Qd2XsAkvkiaqy+E/NnEbxcmgzszf8Kgw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiSyjmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPSQ/5AEWEiwXuK2mRKTVW2QxMo8IQzgkGnpeGYZRAXX55bUzU0vIL\r\nAoyhuVL3CExHy6d/NJA2m6TU0QsGDftHukqBnC1Yw18MACAg6YCkFqzvXfCO\r\nzzroIj9ODMHvj0T8fRZEtsiY9QqocMZjzFSnefQYDZVGuQ7p2xwn520FHkNZ\r\nMiH7W65WUq0xUklBNGxzZX2UoMlqbe5Xy4Es4M5EwxduCjZY/LBiFw79Ptom\r\n6jjHzjtYb/RS0CDO/g8QWpTK0C0JSM6RjNwPeMAFYh1Rl7YfarnTSKkthtOj\r\nZt/c/zCZPGbPkJxUYk4B6HeNkl2tOwPYIGprs2CRrScrfGTnDmKjVLaF+3wa\r\nADTfA7Pbezr7WVkUz+bO5CpilABZ6oRHMTlI7vNHII2RKsBIz5K24/x/sDrU\r\nyDrrUdFDqqJJEqWwNrvbpa2v9I8pvzgZYV3lG8gKhgh3lPbPIxkL1BeyNnCa\r\nhbsVielAJYIDxQ08pvoVtloIu/bHYaKffWPXkI7lJ/QEoaVKojgxj/Xav1Pt\r\nJ+m8R0xTMWKXjzhhNIOuo8kTBAM94/gRSinNJ8AYyJQHlyJFnsaPizAeuV34\r\n8KGACIRiRG7+lvtmCkfdghKDCF67DYGuGneAbbnEU/Yi4LQI4K5HHf1Y/M2q\r\nsBaWSm1aggRAneOmwIKpTmTFpik6NoNrfwQ=\r\n=khXc\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"},{"name":"screeny05","email":"sl@scn.cx"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.1.0_1649092838484_0.7145606271567144"},"_hasShrinkwrap":false},"1.1.1":{"name":"@best-it/iconly","version":"1.1.1","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"https://github.com/bestit/iconly.git"},"author":{"name":"best it GmbH","email":"info@bestit.de"},"contributors":[{"name":"best it GmbH","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","main":"./dist/commonjs/index.js","module":"./dist/esm/index.js","type":"module","types":"./dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/commonjs/index.js"},"./src":"./src/index.ts","./src/*":"./src/*"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^5.17.0","@typescript-eslint/parser":"^5.17.0","@webcomponents/webcomponentsjs":"^2.5.0","eslint":"^7.9.0","eslint-config-bestit-base":"^1.1","shx":"^0.3.3","ts-loader":"^9.2.2","typescript":"^4.6.3","webpack":"^5.38.1","webpack-cli":"^4.7.0","webpack-dev-server":"^4.7"},"scripts":{"clean":"shx rm -rf dist","build":"yarn run clean && yarn run build:declaration && yarn run build:esm && yarn run build:commonjs && yarn run build:umd","build:declaration":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","build:esm":"tsc --module es2015 --target es5 --outDir dist/es5/esm && tsc --module es2015 --target es6 --outDir dist/esm","build:commonjs":"tsc --module commonjs --target es5 --outDir dist/es5/commonjs && tsc --module commonjs --target es6 --outDir dist/commonjs","build:umd":"webpack --mode=production --config-name es5 && webpack --mode=production --config-name es6","serve:es5":"webpack serve --config-name es5 --mode=development","serve:es6":"webpack serve --config-name es6 --mode=development","eslint":"npx eslint ./src/**/*.ts","publish":"yarn publish --access public","publish:beta":"yarn publish --access public --tag beta"},"dependencies":{},"licenseText":"MIT License\n\nCopyright (c) 2021 best it AG\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@best-it/iconly@1.1.1","dist":{"shasum":"ebe80b96d9947234c53a6aba0e07e6722d7b690e","integrity":"sha512-7YksTPY+KHlrV2zOJXzXMdr29EM4w3DtEd0EhpJ3tM8RJjsmBy3v88bztv3Hg20QsnbaNa7yE+7HI0JLcm7bKA==","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.1.1.tgz","fileCount":134,"unpackedSize":382610,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq9TxAe2SO5U+n2A0lNthJFQ0EZsN4kAVbWhqiVvzQKAIhAPWUT9cUTj49z4JBEu1I5PMGzSgas6rPz3jIlyZzQUqk"}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.1.1_1700127601257_0.490205914530631"},"_hasShrinkwrap":false},"1.2.0":{"name":"@best-it/iconly","version":"1.2.0","description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"git+https://github.com/bestit/iconly.git"},"author":{"name":"best it GmbH","email":"info@bestit.de"},"contributors":[{"name":"best it GmbH","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/types/index.d.ts","exports":{".":"./dist/index.js","./src":"./src/index.ts","./src/*":"./src/*"},"devDependencies":{"@stylistic/eslint-plugin":"^1.3.3","@typescript-eslint/eslint-plugin":"^6.11.0","@typescript-eslint/parser":"^6.11.0","eslint":"^8.50.0","shx":"^0.3.4","typescript":"^5.2.2"},"scripts":{"build":"yarn eslint && yarn build:clean && yarn build:types && yarn build:module","build:clean":"shx rm -rf dist","build:module":"tsc","build:types":"tsc --declaration true --declarationDir ./dist/types --emitDeclarationOnly true","eslint":"eslint ./src/**/*.ts","publish:public":"yarn build && npm publish --access public","publish:beta":"yarn build && npm publish --access public --tag beta","publish:dry":"yarn build && npm publish --access public --dry-run"},"dependencies":{},"_id":"@best-it/iconly@1.2.0","readme":"# Iconly\nIconly is a tool to create custom html elements that handle your SVG icons/images. It allows you to load SVGs from different sources and inlines the SVG code in your HTML. After the SVG was inlined in your HTML you can to whatever you want with the code, you can style it, animate it or even use JavaScript to modify the SVG directly.\n\n## Installion\nnpm:\n```bash\nnpm install @best-it/iconly\n```\n\nyarn:\n```bash\nyarn add @best-it/iconly\n```\n\n## Usage\nIn the dist folder are multiple versions to choose from. There is a CommonJS version, a ES Modules version and a Universal Module Definition. In addition each module comes with a ES5 version to.\n\n### Creating a new custom element\nTo create a new element you simply run the createElement method from the Iconly module and pass it an element name.\n\n```javascript\nIconly.createElement('iconly');\n```\nWhich will allow you to write a HTML element like this:\n```html\n<iconly></iconly>\n```\nThis element won't do much for now. We'll have to configure our element a bit more for that.\n\n### Configuring the element\nYou can either pass the configuration directly in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {\n        fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n    }\n);\n```\nor you can load an already created element and modify its configuration:\n```javascript\nIconly.getElement('iconly').setConfig({\n    fetchPattern: '/icons/%NAMESPACE%/%PACK%/%SYMBOL%.svg',\n});\n```\n\nIf you want to see the current config simply use the getConfig method:\n```javascript\nIconly.getElement('iconly').getConfig();\n```\n\nThe fetchPattern added to the config allows you now to load SVGs with such a path. For example a SVG stored in */icons/storefront/default/my-icon.svg* would load like this\n```html\n<iconly symbol=\"my-icon\" pack=\"default\" namespace=\"storefront\">\n    <!-- SVG will be inserted here -->\n</iconly>\n```\n\nAnd it's actually possible to omit the pack and namespace attributes in this case, because pack and namespace automatically fallback to these values:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\nThe default values for pack and namespace are of course part of the config too, so feel free to change them:\n```javascript\nIconly.getElement('iconly').setConfig({\n    defaultPack: 'YOUR_PACK',\n    defaultNamespace: 'YOUR_NAMESPACE',\n});\n```\n\n### Adding an icon library\nYou can either pass the library in the createElement method, like this:\n```javascript\nIconly.createElement(\n    'iconly',\n    {},\n    {\n        'storefront': {\n            'default': {\n                'my-icon': '/icons/storefront/default/my-icon.svg'\n            }\n        }\n    }\n);\n```\nor you can load an already created element and modify its library:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n\n// Merge with the existing library tree\nIconly.getElement('iconly').getLibrary().mergeTree({\n    'storefront': {\n        'default': {\n            'my-icon': '/icons/storefront/default/my-icon.svg'\n        }\n    }\n});\n```\n\nThis is pretty much the same like the *fetchPattern* example from the last section, the custom element wil look in the library and find the url to fetch from. But in the case you could actually rename your symbol, pack or namespace and keep the url like it is to create a mapping for your icons.\n\nBut you don't have to store another url in the library, you could also store the complete SVG code as a string:\n```javascript\n// Overwrite the complete library tree\nIconly.getElement('iconly').getLibrary().setTree({\n    'storefront': {\n        'default': {\n            'my-icon': '<svg>...</svg>'\n        }\n    }\n});\n```\nThis way the custom element wouldn't fetch the svg resource, instead it would load it directly from the library.\n\nAnd the HTML for all these examples is still the same:\n```html\n<iconly symbol=\"my-icon\"></iconly>\n```\n\n### Element Attributes\nBesides the symbol, pack and namespace attributes to identify the correct icon, there are some additional attributes to modify an icon.\n\n* rotate\n    ```html\n    <iconly symbol=\"my-icon\" rotate=\"90deg\"></iconly>\n    ```\n* flip\n    ```html\n    <iconly symbol=\"my-icon\" flip=\"horizontal\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"vertical\"></iconly>\n    <iconly symbol=\"my-icon\" flip=\"both\"></iconly>\n    ```\n\n* loading\n    ```html\n    <!-- Default icon is loader directly -->\n    <iconly symbol=\"my-icon\" loading=\"eager\"></iconly>\n\n    <!-- Lazy loaded via intersection observer -->\n    <iconly symbol=\"my-icon\" loading=\"lazy\"></iconly>\n    ```\n\n    An intersection observer config can be passed in the config:\n    ```javascript\n    {\n        intersectionObserver: {\n            root?: Element | Document | null;\n            rootMargin?: string;\n            threshold?: number | number[];\n        }\n    }\n    ```\n\n* mode\n    ```html\n    <!-- Default is replace -->\n    <iconly symbol=\"my-icon\" mode=\"replace\"></iconly>\n\n    <!-- Inline doesn't replace the icon, allows predifined svgs-->\n    <iconly symbol=\"my-icon\" mode=\"inline\">\n        <svg>...</svg>\n    </iconly>\n\n    <!-- Wraps multiple items and writes the icon into reusable css variable instead -->\n    <iconly symbol=\"my-icon\" mode=\"wrap\" style=\"--icon: url(svg)\">\n        <button></button>\n    </iconly>\n    ```\n\n## Handler\nIconly uses handler to identify the configuratuion and attributes for each element and determines which handler fits best.\n\nIconly uses the following handler:\n\n* NullHandler\n    Checks if the element doesn't have enough attributes to be processed by the following handlers. Throws an error if not enough attributes are set.\n\n* LibraryInlineHandler\n    Checks if the stored libary value doesn't look like an URL and returns it as an inline SVG.\n\n* LibraryRemoteHandler\n    Checks if the stored libary value does look like an URL, fetches the asset and returns it code.\n\n* FetchHandler\n    Uses the *fetchPattern*, if definied to load the svg from the URL and returns its code.\n\nIt is possible to modify these handler.\n\nGet handler list:\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .getHandlerList();\n```\n\nYou can reorder them by changing their priorities:\n\n```javascript\nIconly\n    .getElement('test-icon')\n    .getIconHandlr()\n    // Index starts with 0 for NullHandler\n    .getHandler(0)\n    .setPriority(99);\n\n// Reorder handler list based on new priorities\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .order();\n```\n\nYou can add or remove handler:\n```javascript\n// Creating new handler with esm\nimport { AbstractHandler } from 'PATH_TO_ICONLY/dist/esm/handler/abstract-handler';\n\nclass CustomHandler extends AbstractHandler {\n    supports(element) {\n        // Your code\n    }\n    getIcon(element) {\n        // Your code\n    }\n}\n\n// Adding\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .addHandler(new CustomHandler());\n\n// Removing\nIconly\n    .getElement('test-icon')\n    .getIconHandler()\n    .removeHandler(INDEX);\n\n// replacing the complete handler list\nIconly.getElement('test-icon').getIconHandler().setHandlerList([\n    new CustomHandler(),\n])\n```\n\n## Development\nRun dev server for either es5 or es6 mode:\n```bash\nyarn run serve:es5\n```\n\n```bash\nyarn run serve:es6\n```\n\nBuilding:\n```bash\nyarn run build\n```\n\n\n## Iconly structure design\nThe structure of the Iconly source code is visualized as an UML chart at [GitMind.com](https://gitmind.com/app/flowchart/4b92539410).\n","readmeFilename":"README.md","gitHead":"63f5816c8f080a7ff38dfb5d33e6baf63bd251b1","bugs":{"url":"https://github.com/bestit/iconly/issues"},"homepage":"https://github.com/bestit/iconly#readme","_nodeVersion":"18.19.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-evncxZjTkdE5uKhhml20rFaDgU0EmcmP5UG1XqQNUbsp+qVIqEY4BPlIPc/ZZ8xOWrSr8punKIqvV0kL8/uAMg==","shasum":"b07fec062c31d1bdc8ce893cddb5e65fb12ba0c0","tarball":"https://registry.npmjs.org/@best-it/iconly/-/iconly-1.2.0.tgz","fileCount":43,"unpackedSize":87725,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+XuLhJh3Be87EV0ewQpB5C5RB9vL36xzXcMlN11ig4wIgRJbobeMAwVp59rioexpzH5btiaSqqidOBAte2fSwxco="}]},"_npmUser":{"name":"s5nw","email":"steve-weber@web.de"},"directories":{},"maintainers":[{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/iconly_1.2.0_1707216443186_0.3762245724766724"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-08T08:25:06.221Z","1.0.0":"2021-07-08T08:25:06.777Z","modified":"2024-02-06T10:47:23.589Z","1.0.1":"2021-07-08T13:04:45.772Z","1.0.2":"2021-07-08T13:10:43.956Z","1.0.3":"2021-07-09T05:13:08.992Z","1.0.4":"2021-07-21T13:18:06.667Z","1.0.5":"2021-07-21T13:32:17.384Z","1.0.6-beta.0":"2021-07-26T08:28:46.537Z","1.0.6-beta.1":"2021-07-26T09:59:18.397Z","1.0.6-beta.2":"2021-07-26T12:22:03.263Z","1.0.6-beta.3":"2021-07-26T12:24:54.446Z","1.0.6-beta.4":"2021-07-29T08:34:45.246Z","1.0.6-beta.5":"2021-07-29T09:17:58.773Z","1.0.6-beta.6":"2021-07-29T09:29:20.797Z","1.0.6-beta.7":"2021-07-29T09:38:30.554Z","1.0.6-beta.8":"2021-07-29T09:48:58.820Z","1.1.0":"2022-04-04T17:20:38.624Z","1.1.1":"2023-11-16T09:40:01.503Z","1.2.0":"2024-02-06T10:47:23.343Z"},"maintainers":[{"name":"rainerki-bestit","email":"rainer.kinzl@bestit.at"},{"name":"bestitvarelmann","email":"andre.varelmann@bestit.de"},{"name":"tkellner","email":"tim-kellner@outlook.de"},{"name":"s5nw","email":"steve-weber@web.de"}],"description":"SVG icon system utilising a custom element","repository":{"type":"git","url":"https://github.com/bestit/iconly.git"},"contributors":[{"name":"best it GmbH","email":"info@bestit.de"},{"name":"Stephan Weber","email":"steve-weber@web.de"}],"author":{"name":"best it GmbH","email":"info@bestit.de"},"license":"MIT","readme":"","readmeFilename":""}