2d:null 2e:["$","title",null,{"children":"Feather Icon Inspector | Nikita Sharov | Observable"}] 33:[] 31:{"id":"f665ca6a4fbd8250","slug":"feather-icon-inspector","title":"Feather Icon Inspector","thumbnail":"59810cfc17245fbaa66b5d9f0ed9bfc100e521129bd990d905f8397c9c54ba1d","access_level":"public","create_time":"$D2020-08-24T19:15:50.898Z","update_time":"$D2021-02-22T09:26:47.466Z","view_time":null,"first_public_time":"$D2020-08-25T10:05:15.250Z","has_unpublished_edits":null,"fork":{"id":"766d4da41e35117d","slug":"feather-icons","title":"Feather Icons","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"stars":2,"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":696,"publish_version":696,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d790527d39b896f6","slug":"icons","title":"Icons","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"type":"notebook","body":{"title":"Feather Icon Inspector","cells":[{"id":0,"value":"md`# Feather Icon Inspector\n\nBad icons get tarred and feathered.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof iconSelect = select({\n title: \"Suspect\",\n options: Object.keys(feather.icons),\n value: \"feather\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"viewof cellLength = slider({\n title: \"Provisional detention cell length\",\n min: 10,\n max: 30, // use width variable\n value: 15,\n step: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"{\n const cellCount = 24; // per line\n const sideLength = cellLength * cellCount;\n \n // svgs can be nested\n const composition = `\n`;\n\n return html`\n

\n ${composition}\n

Each icon is designed on a 24x24 grid.

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof strokeWidth = slider({\n title: \"stroke-width\",\n min: 0.5,\n max: 3,\n step: 0.5,\n value: 2,\n format: v => `${v.toFixed(1)} (no unit of length set)`,\n description: \"Represents a distance in the coordinate system defined by the icon's viewBox.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"viewof strokeOpacity = slider({\n title: \"stroke-opacity\",\n min: 0.1,\n max: 1,\n step: 0.1,\n value: 0.3,\n format: \".0%\",\n description: \"Reveals the shapes the icon is made of.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"viewof strokeLinecap = radio({\n title: \"stroke-linecap\",\n options: [\"butt\", \"round\", \"square\"],\n value: \"round\",\n description: md`Defines the shape at the end of [open subpaths](https://svgwg.org/svg2-draft/paths.html#TermClosedSubpath) (when they are stroked).`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"viewof strokeLinejoin = radio({\n title: \"stroke-linejoin\",\n options: [\"arcs\", \"bevel\", \"miter\", \"miter-clip\", \"round\"],\n value: \"round\",\n description: \"Defines the shape at the corners of paths.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"import {select, slider, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"feather = require(\"feather-icons\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"icon = (sideLength) => {\n const options = { \n \"width\": sideLength, \n \"height\": sideLength,\n \"stroke\": \"black\",\n \"stroke-width\": strokeWidth, \n \"stroke-opacity\": strokeOpacity,\n \"stroke-linecap\": strokeLinecap,\n \"stroke-linejoin\": strokeLinejoin\n }; \n \n return feather.icons[iconSelect].toSvg(options);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"grid = (sideLength, cellLength) => {\n const magicOffset = 0.5; // see: https://stackoverflow.com/a/61013292\n\n const className = (tick) => {\n if ((tick === magicOffset) || (tick === (sideLength + magicOffset))) {\n return \"outer-grid-line\";\n } else {\n return \"inner-grid-line\";\n } \n }\n \n const verticalLine = (x) => \n ``; \n \n const horizontalLine = (y) => \n ``;\n \n let grid = \"\"; \n for (let tick = magicOffset; tick <= (sideLength + magicOffset); tick += cellLength) {\n grid += verticalLine(tick);\n grid += horizontalLine(tick);\n }\n \n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"