{"id":22728103,"url":"https://github.com/focusreactive/sanity-plugin-inline-svg-input","last_synced_at":"2025-04-13T21:50:20.905Z","repository":{"id":206510492,"uuid":"716639085","full_name":"focusreactive/sanity-plugin-inline-svg-input","owner":"focusreactive","description":"Sanity plugin to upload and preview inline SVGs","archived":false,"fork":false,"pushed_at":"2024-02-23T17:31:57.000Z","size":963,"stargazers_count":16,"open_issues_count":3,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-24T15:09:55.403Z","etag":null,"topics":["input","plugin","preview","sanity-io","sanity-studio","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@focus-reactive/sanity-plugin-inline-svg-input","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/focusreactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-09T14:58:50.000Z","updated_at":"2024-04-18T18:02:53.000Z","dependencies_parsed_at":"2023-11-14T16:28:10.199Z","dependency_job_id":"4be27a77-cac8-465c-b306-3a2df4977836","html_url":"https://github.com/focusreactive/sanity-plugin-inline-svg-input","commit_stats":null,"previous_names":["focusreactive/sanity-plugin-inline-svg-input"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fsanity-plugin-inline-svg-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fsanity-plugin-inline-svg-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fsanity-plugin-inline-svg-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/focusreactive%2Fsanity-plugin-inline-svg-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/focusreactive","download_url":"https://codeload.github.com/focusreactive/sanity-plugin-inline-svg-input/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248788855,"owners_count":21161726,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["input","plugin","preview","sanity-io","sanity-studio","svg"],"created_at":"2024-12-10T17:14:38.185Z","updated_at":"2025-04-13T21:50:20.878Z","avatar_url":"https://github.com/focusreactive.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sanity Plugin Inline SVG Input [![npm version](https://badge.fury.io/js/@focus-reactive%2Fsanity-plugin-inline-svg-input.svg)](https://badge.fury.io/js/@focus-reactive%2Fsanity-plugin-inline-svg-input) [![Sanity Exchange](https://img.shields.io/badge/sanity-exchange-green)](https://www.sanity.io/plugins/sanity-plugin-inline-svg-input)\n\n**Sanity Studio v3** plugin to upload and preview inline SVGs.\n\n- [Simple and easy to use](#usage)\n- Safe SVG sanitization with [dompurify](https://github.com/cure53/DOMPurify)\n- [SVG preview in arrays](#within-arrays)\n- [Customizable preview component](#custom-preview-component)\n\n![preview](https://raw.githubusercontent.com/focusreactive/sanity-plugin-inline-svg-input/main/docs/preview.gif)\n\n## Installation\n\n```sh\nnpm install @focus-reactive/sanity-plugin-inline-svg-input\n```\n\n```sh\nyarn add @focus-reactive/sanity-plugin-inline-svg-input\n```\n\n```sh\npnpm add @focus-reactive/sanity-plugin-inline-svg-input\n```\n\n## Usage\n\n1. Add it as a plugin in `sanity.config.ts` (or .js):\n\n```ts\nimport { defineConfig } from 'sanity'\nimport { inlineSvgInput } from '@focus-reactive/sanity-plugin-inline-svg-input'\n\nexport default defineConfig({\n  // ...\n  plugins: [inlineSvgInput()],\n})\n```\n\n2. Use the `inlineSvg` type in your schema types:\n\n```ts\n// ...\n{\n  fields: [\n    // ...\n    {\n      name: 'svgIcon',\n      title: 'SVG Icon',\n      type: 'inlineSvg',\n    },\n  ]\n}\n```\n\nThat's it! Now you can use this field to upload SVG images and see the preview in your Sanity Studio.\n\n## Preview\n\nThe sections below describe how to preview your SVG within arrays, objects or your own custom preview component.\n\n### Within arrays\n\nSanity offers a convenient way to preview arrays out of the box, but it only allows the use of the `image` type in `media`.\nTo provide same functionality for SVGs, we provide a ready-to-use preview component that mimics the default array preview.\n\n![preview](https://raw.githubusercontent.com/focusreactive/sanity-plugin-inline-svg-input/main/docs/preview-list.jpg)\n\nTo preview your SVG in arrays, use the `InlineSvgPreviewItem` component.\\\nIt accepts the following props:\n\n- `icon` [string] - inline SVG\n- `title` [string] - the title of the item\n- `subtitle` [string] - the subtitle of the item\n\n`iconsList` in the example below is an array of objects with `icon`, `title` and `subtitle` fields.\nTo use them in preview the same way as the default array preview,\nonly what you need is to replace default preview component with `InlineSvgPreviewItem`.\n\n```tsx\nimport { defineType } from 'sanity'\nimport { InlineSvgPreviewItem } from '@focus-reactive/sanity-plugin-inline-svg-input'\n\nconst IconsListItem = defineType({\n  type: 'object',\n  name: 'iconsListItem',\n  fields: [\n    {\n      name: 'icon',\n      type: 'inlineSvg',\n    },\n    {\n      name: 'title',\n      type: 'string',\n    },\n    {\n      name: 'subtitle',\n      type: 'string',\n    },\n  ],\n  preview: {\n    select: {\n      icon: 'icon',\n      title: 'title',\n      subtitle: 'subtitle',\n    },\n  },\n  components: {\n    preview: ({ icon, title, subtitle }) =\u003e {\n      return \u003cInlineSvgPreviewItem icon={icon} title={title} subtitle={subtitle} /\u003e\n    },\n  },\n})\n\nconst IconsList = defineType({\n  name: 'iconsList',\n  type: 'array',\n  of: [{ type: IconsListItem.name }],\n})\n```\n\n### Custom preview component\n\nIf you need more customization or want to build your own preview component using SVG icons,\nyou can use the `InlineSvgPreviewComponent`.\n\n`InlineSvgPreviewComponent` is the smallest building block of the plugin the only purpose of which is to sanitize and render SVG.\\\nIt accepts the following props:\n\n- `value` [string] - inline SVG\n\n```tsx\nimport { InlineSvgPreviewComponent } from '@focus-reactive/sanity-plugin-inline-svg-input'\n\nexport const PreviewComponent = ({ value }) =\u003e {\n  return (\n    // ...\n    \u003cInlineSvgPreviewComponent value={value} /\u003e\n    // ...\n  )\n}\n```\n\nTo customize the preview component, you can either:\n\n- Pass `className` or `style` props\n- Extend default styles with `styled-components`\n\n```tsx\nimport { InlineSvgPreviewComponent } from '@focus-reactive/sanity-plugin-inline-svg-input'\nimport styled from 'styled-components'\n\nconst StyledInlineSvg = styled(InlineSvgPreviewComponent)`\n  // ...\n`\n```\n\n## Development, testing and publishing\n\nThis plugin uses [@sanity/plugin-kit](https://github.com/sanity-io/plugin-kit)\nwith default configuration for build \u0026 watch scripts.\n\n`npm run build` - creates a ready to publish plugin in `/dist` folder.\n\n`npm run link-watch` - creates a symlink from the plugin repo to the local sanity repo and watches for changes.\nAfter running this command, you will see the instructions on how to add this plugin to your Sanity Studio in the terminal.\n\n`npm publish` - there is pre-publish script that prepares the plugin for publishing, you don't need to build it manually.\nPlease run `npm publish --dry-run` to make sure that everything is ok before publishing.\n\nSee [Testing a plugin in Sanity Studio](https://github.com/sanity-io/plugin-kit#testing-a-plugin-in-sanity-studio)\nfor additional information.\n\n## Credits\n\nThis project was created at **FocusReactive** - the [Sanity Partner Agency](https://www.sanity.io/agency-partners/focusreactive). We specialize in helping clients beat the competition and accelerate business growth. With a deep expertise in headless CMS, NextJS, and eCommerce, we deliver cutting-edge solutions that prioritize your business goals.\n\n### Our Expertise\n\n- **Content-Centric Websites**: We have a deep experience building extendable, SEO optimized content and marketing websites with advanced CMS integrations and analytics.\n- **Headless eCommerce**: Our next-generation, content-rich, and performant online eCommerce websites come with end-to-end integrations to power your digital business.\n- **Headless CMS Consulting**: We offer multi-channel CMS development, modeling, customization, and support to help you manage your content seamlessly across various platforms.\n- **Web Performance**: Our experts can audit, transform the architecture, and optimize your website to meet the 100 SCORE Core Web Vitals for exceptional web performance.\n\nIf you're looking for expertise in headless CMS, NextJS, or eCommerce, get in touch with **FocusReactive** today. Visit our website at [focusreactive.com](https://focusreactive.com/) to learn more about how we can help you accelerate your business growth.\n\n[![FocusReactive](https://raw.githubusercontent.com/focusreactive/sanity-plugin-inline-svg-input/main/docs/FR-logo-long.png)](https://focusreactive.com/sanity-expert-agency/)\n---\n\n_This project is licensed under the MIT License. © 2023 FocusReactive._\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fsanity-plugin-inline-svg-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffocusreactive%2Fsanity-plugin-inline-svg-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffocusreactive%2Fsanity-plugin-inline-svg-input/lists"}