30:T7e8,31:[] 2e:{"title":"Icons","cells":[{"id":0,"value":"# Icons","pinned":false,"hidden":false,"mode":"md"},{"id":2521,"value":"SVG icons for your notebooks from Bonn.","pinned":false,"hidden":false,"mode":"md"},{"id":2531,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3319,"value":"See also [@jerryjappinen/snippets](./snippets) and [@jerryjappinen/ui](./ui)","pinned":false,"hidden":false,"mode":"md"},{"id":3095,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3103,"value":"## Usage","pinned":false,"hidden":false,"mode":"md"},{"id":1301,"value":"```js\nimport { icon } from \"@jerryjappinen/icons\"\n```","pinned":false,"hidden":false,"mode":"md"},{"id":3000,"value":"$${icon(\"gitlab\")} Icons are dynamically colored","pinned":true,"hidden":false,"mode":"md"},{"id":3054,"value":"$${icon(\"gitlab-color\")} Some icons have colors","pinned":true,"hidden":false,"mode":"md"},{"id":3065,"value":"$${icon(\"gitlab-color\", 2)} Icons can be resized","pinned":true,"hidden":false,"mode":"md"},{"id":2529,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3099,"value":"## Full icon set","pinned":false,"hidden":false,"mode":"md"},{"id":1197,"value":"viewof _iconsTableSearch = Inputs.search(\n _.filter(_iconsTable, ({ key }) => {\n if (\n _.includes(previewOptions, \"Hide colored icons\") &&\n key.indexOf(\"color\") > -1\n ) {\n return false;\n }\n\n return true;\n }),\n {\n filter(term) {\n return ({ key }, i) => {\n return _fuzzysearch(term, key);\n };\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"

\n ${_iconsTableSearch.map(({ key }) => {\n return html`

${icon(key, 1)}

\n ${key}\n

`\n })}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2020,"value":"viewof previewOptions = Inputs.checkbox(\n [\"Hide colored icons\", \"Colored background\"],\n { value: [] }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2054,"value":"viewof previewIconSize = Inputs.range([1, 6], {\n label: \"Preview size\",\n step: 0.01,\n value: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":1337,"value":"## Icon IDs","pinned":false,"hidden":false,"mode":"md"},{"id":137,"value":"iconIds = _.keys(icons)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2602,"value":"Icon IDs are completely in lowercase, without special characters. But `icon` or `iconImg` are very forgiving:","pinned":false,"hidden":false,"mode":"md"},{"id":2260,"value":"$${icon(\"gitlabcolor\")} ${icon(\"git-lab-color\")} ${icon(\"GitLab color\")} ${icon(\"GitlabColor\")}","pinned":true,"hidden":false,"mode":"md"},{"id":3195,"value":"$${[\n \"toggle-off\",\n \"toggle-on\",\n \"checkbox-off\",\n \"checkbox-indeterminate\",\n \"checkbox-on\",\n \"radio button off\",\n \"radio button on\"\n].map(key => icon(key))}","pinned":true,"hidden":false,"mode":"md"},{"id":612,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2163,"value":"## Dynamic coloring","pinned":false,"hidden":false,"mode":"md"},{"id":1454,"value":"Icons are dynamically colored when using `icon()`:","pinned":false,"hidden":false,"mode":"md"},{"id":944,"value":" Open link ${html`${icon(\"external\")}`}","pinned":true,"hidden":false,"mode":"html"},{"id":913,"value":"

\n ${html`${icon(\"medium\", 3)}`}\n \n ${html`${icon(\"medium-color\", 3)}`}\n

","pinned":true,"hidden":false,"mode":"html"},{"id":2787,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2783,"value":"`img` tags do not support `currentColor`:","pinned":false,"hidden":false,"mode":"md"},{"id":1108,"value":"

\n ${html`${icon(\"medium\")}`} icon()\n \n ${html`${iconImg(\"medium\")}`} iconImg()\n

","pinned":true,"hidden":false,"mode":"html"},{"id":343,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2177,"value":"## Icon size","pinned":false,"hidden":false,"mode":"md"},{"id":357,"value":"iconSize = \"1em\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2769,"value":"Default icon size is `${iconSize}`, but you can display an icon in any size you like:","pinned":false,"hidden":false,"mode":"md"},{"id":520,"value":"$${icon(\"gitlab\")} ${icon(\"gitlab\", 2)} ${iconImg(\"gitlab\", \"41px\")} ${icon(\"gitlab\", \"1.5cm\")}","pinned":true,"hidden":false,"mode":"md"},{"id":2775,"value":"Note that you can also set a different default while importing.","pinned":false,"hidden":false,"mode":"md"},{"id":1150,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2561,"value":"## Access icon data","pinned":false,"hidden":false,"mode":"md"},{"id":419,"value":"function icon(iconId, size, paddingBottom) {\n const id = _.camelCase(iconId).toLowerCase();\n\n if (icons[id]) {\n const s = _.isNumber(size) ? size + \"em\" : size ? size : iconSize;\n const p =\n paddingBottom && _.isNumber(paddingBottom)\n ? paddingBottom + \"em\"\n : _.isUndefined(paddingBottom)\n ? padding\n : paddingBottom;\n\n return icons[id].replace(\n ``;\n\n if (size) {\n const s = _.isNumber(size) ? size + \"em\" : size ? size : iconSize;\n return h.replaceAll(\n `style=\"width: ${iconSize}; height: ${iconSize};`,\n `style=\"width: ${s}; height: ${s};`\n );\n }\n return h;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2974,"value":"`iconImg()` outputs an `` instead of an `