安全性插件内置 SVG 输入

卫生工作室 v3 用于上传和预览内置 SVG 的插件 .

• 简单易用
• SVG 安全消毒处理 净化
• 数组中的 SVG 预览
• 自定义预览组件

安装

npm install @focus-reactive/sanity-plugin-inline-svg-input

yarn add @focus-reactive/sanity-plugin-inline-svg-input

pnpm add @focus-reactive/sanity-plugin-inline-svg-input

使用量

1. 将其添加为插件 sanity.config.ts (或说.js):

import { defineConfig } from 'sanity'
import { inlineSvgInput } from '@focus-reactive/sanity-plugin-inline-svg-input'

export default defineConfig({
  // ...
  plugins: [inlineSvgInput()],
})

2. 使用 inlineSvg 类型:

// ...
{
  fields: [
    // ...
    {
      name: 'svgIcon',
      title: 'SVG Icon',
      type: 'inlineSvg',
    },
  ]
}

就这样! 现在您可以使用这个字段上传 SVG 图像, 并在您的 Sanity 工作室中看到预览 .

预览

以下章节描述了如何在阵列、对象或自定义预览组件中预览您的 SVG .

在数组内

Sanity提供了从框中预览阵列的方便方式,但只允许使用 image 类型在 media。 。 。 . 为了为SVG提供相同的功能,我们提供一个即用预览组件来模仿默认阵列预览.

要在阵列中预览您的 SVG, 请使用 InlineSvgPreviewItem 组件.
它接受以下道具:

• icon [字符串] - 内置 SVG
• title [弦] - 项目标题
• subtitle [弦] - 项目的字幕

iconsList 下面示例中的一组对象为: icon, (中文(简体) ), title 财务报告和审定财务报表 subtitle 字段. 要在预览中使用与默认数组预览相同的方式, 您只需要将默认预览组件替换为 InlineSvgPreviewItem。 。 。 .

import { defineType } from 'sanity'
import { InlineSvgPreviewItem } from '@focus-reactive/sanity-plugin-inline-svg-input'

const IconsListItem = defineType({
  type: 'object',
  name: 'iconsListItem',
  fields: [
    {
      name: 'icon',
      type: 'inlineSvg',
    },
    {
      name: 'title',
      type: 'string',
    },
    {
      name: 'subtitle',
      type: 'string',
    },
  ],
  preview: {
    select: {
      icon: 'icon',
      title: 'title',
      subtitle: 'subtitle',
    },
  },
  components: {
    preview: ({ icon, title, subtitle }) => {
      return <InlineSvgPreviewItem icon={icon} title={title} subtitle={subtitle} />
    },
  },
})

const IconsList = defineType({
  name: 'iconsList',
  type: 'array',
  of: [{ type: IconsListItem.name }],
})

自定义预览组件

如果您需要更多定制或想要使用 SVG 图标构建自己的预览组件, 您可以使用 InlineSvgPreviewComponent。 。 。 .

InlineSvgPreviewComponent 是插件中最小的块块,其唯一目的就是将SVG进行消毒并制成.
它接受以下道具:

• value [字符串] - 内置 SVG

import { InlineSvgPreviewComponent } from '@focus-reactive/sanity-plugin-inline-svg-input'

export const PreviewComponent = ({ value }) => {
  return (
    // ...
    <InlineSvgPreviewComponent value={value} />
    // ...
  )
}

要自定义预览组件,您可以:

• 过 className 或者说 style 道具
• 延长默认样式 styled-components

import { InlineSvgPreviewComponent } from '@focus-reactive/sanity-plugin-inline-svg-input'
import styled from 'styled-components'

const StyledInlineSvg = styled(InlineSvgPreviewComponent)`
  // ...
`

开发、测试和出版

此插件使用 @ sanity/ plugin- kit 带有构建和监视脚本的默认配置.

npm run build - 创建一个准备在 /dist 文件夹.

npm run link-watch - 从插件 repo 到本地的 sanity repo 和 手表 来创建一个符号链接 . 运行此命令后, 您将会看到如何在终端中将这个插件添加到您的 Sanity 工作室的指令 .

npm publish - 有预出文字准备用于出版的插件,你不需要手动构建. 请跑 npm publish --dry-run 在出版前确保一切正常.

见 在 Sanity 工作室测试插件 用于补充信息.

贷项

此工程创建于 焦点反应 - 那个 卫生伙伴机构我们专门帮助客户战胜竞争并加速商业增长。 在无头的CMS、NextJS和eCommerce方面, 我们提供最先进的解决方案, 优先安排你的商业目标.

我们的专长

• 内容-学科网站:我们拥有可扩展,SEO优化内容和营销网站的深度经验建设,拥有先进的CMS集成和分析功能.
• 无头电子商务:我们的下一代,内容丰富的,以及表现优异的在线eCommerce网站随着端到端的集成来为您的数字业务提供动力.
• 无头CMS咨询公司:我们提供多渠道的CMS开发,建模,定制,以及支持,帮助您在各种平台上无缝地管理您的内容.
• 网络性能:我们的专家可以审核,改造架构,并优化您的网站,以满足100 SCORE核心网络维生功能,实现卓越的网络性能.

如果你是在寻找无头CMS, NextJS,或eCommerce的专业知识, 请联系 焦点反应 今时. 访问我们的网站 焦点反应活性.com 学习我们如何帮助你加快你的商业成长.

这个项目根据麻省理工学院的许可证获得许可。 2023焦点反应.