2b:null 2c:["$","title",null,{"children":"Observable Icon Inspector | Nikita Sharov | Observable"}] 31:T4ec,{ const icon = icons[iconName]; const [colCount, rowCount] = dimensions === "fixed" ? [16, 16] : [icon.attributes.width, icon.attributes.height]; const width = colCount * cellLength; const height = rowCount * cellLength; const translateX = (colCount - icon.attributes.width) / 2; const translateY = (rowCount - icon.attributes.height) / 2; const translate = `translate(${translateX}, ${translateY})`; const rotateX = icon.attributes.width / 2; const rotateY = icon.attributes.height / 2; const rotate = `rotate(${rotation}, ${rotateX}, ${rotateY})` const options = ({ "fill-opacity": fillOpacity, "stroke-opacity": strokeOpacity }); // svgs can be nested const composition = ` `; return html`

${composition}

Icon's native dimensions are: ${icon.attributes.width}x${icon.attributes.height} (width, height).

`; }32:T409,grid = (colCount, rowCount, cellLength) => { const width = colCount * cellLength; const height = rowCount * cellLength; const magicOffset = 0.5; // see: https://stackoverflow.com/a/61013292 const className = (tick, sideLength) => { if ((tick === magicOffset) || (tick === (sideLength + magicOffset))) { return "outer-grid-line"; } else { return "inner-grid-line"; } } const verticalLine = (x) => ``; const horizontalLine = (y) => ``; let grid = ""; for (let row = 0; row <= rowCount; row++) { const tick = (row * cellLength) + magicOffset; grid += horizontalLine(tick); } for (let col = 0; col <= colCount; col++) { const tick = (col * cellLength) + magicOffset; grid += verticalLine(tick); } return grid; }33:[{"id":"ccc084ca0e7a2a27fcf0b8dd43066243a54494d7a1cfa092027ea6ca52acc417ae99ca9b9981a3993f9aba517b66a31c3c1ead257c6c76db561e67767b8d7824","href":"https://static.observableusercontent.com/files/ccc084ca0e7a2a27fcf0b8dd43066243a54494d7a1cfa092027ea6ca52acc417ae99ca9b9981a3993f9aba517b66a31c3c1ead257c6c76db561e67767b8d7824","name":"options.json","type":"application/json","lastModified":1598856430765.528,"size":34248}] 2f:{"id":"b5967b101a846b2d","slug":null,"title":"Observable Icon Inspector","thumbnail":"0a0e7e50124a907026f7411f416f94ec8dc26603b94176ec8d8132603c5841f0","access_level":"unlisted","create_time":"$D2020-08-27T13:04:32.540Z","update_time":"$D2020-10-09T11:01:52.474Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":{"id":"f665ca6a4fbd8250","slug":"feather-icon-inspector","title":"Feather Icon Inspector","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":"starter_2024"},"version":1708,"publish_version":1708,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null}],"members":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"07bb977f19c87075","slug":"observable","title":"Observable","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"type":"notebook","body":{"titling":"auto","title":"Observable Icon Inspector","cells":[{"id":0,"value":"md`# Observable Icon Inspector`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1654,"value":"md`---\n\nPublication permission denied by Observable team:\n\n> Unfortunately, we cannot approve using our icons in the way you propose in your notebook and explained in your [forum post](https://talk.observablehq.com/t/written-permission-to-use-observable-icons/3993). Those icons are Observable's, and we don't approve of others using them in their own notebooks. There are official Observable notebooks that do use the icons, but those are for our use and not meant for others to use in vector form.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1603,"value":"viewof dimensions = checkbox({\n options: [{ label: \"Fixed grid dimensions\", value: \"fixed\" }],\n value: \"fixed\",\n description: \"Most icons are designed in a 16x16 grid.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"viewof cellLength = slider({\n title: \"Cell length\",\n min: 10,\n max: 30, // be responsive, use the width variable\n step: 5,\n value: 20,\n format: d => `${d}px`\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof iconName = {\n const initialIcon = icons[\"observable-logo\"]\n const getDescription = icon => {\n const description = icon.descriptors.join(\"; \").replace(\">\", \"–\");\n return `Used as/in: ${description}.`;\n }\n \n const iconName = select({\n title: \"Icon\",\n options: Object.keys(icons),\n value: initialIcon.name,\n description: getDescription(initialIcon)\n });\n \n iconName.addEventListener(\"input\", () => { \n const icon = icons[iconName.value];\n const element = iconName.querySelector(\"select + div\") // div immediately after select \n element.innerText = getDescription(icon);\n })\n \n return iconName;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"iconIndex = {\n const iconNames = Object.keys(icons);\n const iconIndex = slider({\n title: \"Index, zero-based\",\n min: 0,\n max: iconNames.length - 1,\n value: iconNames.indexOf(viewof iconName.value),\n step: 1,\n description: \"Use keyboard arrow keys to step one icon at a time, when focused.\"\n });\n \n iconIndex.addEventListener(\"input\", (e) => {\n // avoid endless loops\n if (e.detail !== \"ignore\") {\n const name = iconNames[iconIndex.value];\n viewof iconName.input.value = name;\n viewof iconName.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n \n viewof iconName.addEventListener(\"input\", () => {\n const name = viewof iconName.value;\n const index = iconNames.indexOf(name);\n iconIndex.input.value = index; \n iconIndex.dispatchEvent(new CustomEvent(\"input\", { detail: \"ignore\" }));\n })\n \n return iconIndex;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1510,"value":"viewof rotation = slider({\n title: \"Rotation, clockwise\",\n min: 0,\n max: 360, \n value: 0,\n step: 90,\n format: d => `${d}deg`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"viewof fillOpacity = slider({\n title: \"fill-opacity\",\n min: 0.1, \n step: 0.1,\n value: 0.3,\n format: \".0%\",\n description: \"Has no effect when fill is 'none' (defined by the icon).\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"viewof strokeOpacity = slider({\n title: \"stroke-opacity\",\n min: 0.1,\n step: 0.1,\n value: 0.3,\n format: \".0%\",\n description: \"Has no effect when stroke is 'none' (defined by the icon).\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"import {checkbox, radio, select, slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"// import {icons} from \"@nikita-sharov/observable-icons\" // taken down by Observable","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"icons = { \n const icons = {};\n const optionsBackup = await FileAttachment(\"options.json\").json(); \n for (const options of optionsBackup) {\n icons[options.name] = new Icon(options);\n }\n \n return icons;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1224,"value":"class Icon {\n constructor(options) {\n this.name = options.name;\n this.descriptors = options.descriptors;\n this.attributes = { ...DEFAULT_ATTRIBUTES, ...options.attributes };\n this.innerHTML = options.innerHTML;\n }\n \n toSVG(attributes = {}) {\n const mergedAttributes = { ...this.attributes, ...attributes };\n return ``\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1226,"value":"DEFAULT_ATTRIBUTES = ({\n viewBox: \"0 0 16 16\",\n width: 16,\n height: 16,\n fill: \"none\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"toString = (attributes) => \n Object.keys(attributes)\n .map(key => `${key}=\"${attributes[key]}\"`)\n .join(\" \");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1241,"value":"toString(DEFAULT_ATTRIBUTES)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"