Add support for storing icon SVGs as strings #37

[christopherafbjur]

Description

It's been discussed that front-end bundles are being too large due to the dynamic generation of react-icons and an alternative way of generating the icons by including the SVG in the data.

Example

The user will simply add an option storeSvg: true to their sanity-plugin-icon-picker schema type.

{
        title: 'Icon',
        name: 'icon',
        type: 'iconPicker',
        options: {
          storeSvg: true
        }
}

And the studio will store the selected icon as an SVG string in your data:

{
  "icon": {
    "_type": "iconPicker",
    "name": "alert-circle",
    "provider": "fi",
    "svg": "<svg fill=\"none\" height=\"1em\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" width=\"1em\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"12\" cy=\"12\" r=\"10\" /><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\" /><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\" /></svg>"
  }
}

37 #18

[christopherafbjur]

TODO: Add to documentation as well as usage example

[christopherafbjur]

TODO: Add storeSvg to IconPickerOptions interface

[JJK801]

thanks @christopherafbjur exactly what i aimed to do 👏

[christopherafbjur]

Closing. Resolved in #47