在Prismic中处理内联SVG选什么字段？箭头图标建模咨询

示例效果 #

问题描述 #

我正在尝试在Prismic中对这个模块建模，但不知道怎么添加图中的箭头图标。我知道可以用图片字段，但更想用内联SVG，请问有什么可行的处理方法？是不是应该只加两个文本字段，跳过图标建模，直接在前端实现？

可行方案 #

方案一：前端直接实现（最推荐） #

• 只在Prismic中创建两个文本字段，分别存储左右两侧的文本内容
• 箭头SVG直接写在前端代码里：可以用内联SVG代码插入，也可以通过CSS伪元素（:after/:before）来添加。这种方式既能保证图标清晰度，还能灵活控制颜色、大小等样式，不用在Prismic里维护图标资源
• 伪元素实现的简单示例：

.text-pair:after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0 12px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.293 12.707l5.293-5.293a1 1 0 011.414 1.414L12.414 12l3.586 3.586a1 1 0 01-1.414 1.414l-5.293-5.293a1 1 0 010-1.414z"/></svg>') no-repeat center;
  background-size: contain;
}

方案二：在Prismic中配置SVG文本字段 #

• 如果需要在Prismic中管理图标，可以新建一个文本类型的自定义字段，让编辑人员直接粘贴精简后的SVG代码（建议去掉冗余的命名空间和属性，保证代码简洁）
• 前端渲染时直接输出该字段的内容，即可实现内联SVG效果
• 注意：需要提前给编辑人员提供正确的SVG代码模板，避免粘贴错误导致渲染问题

方案三：使用Prismic片段库（Snippets） #

• 将常用的箭头SVG做成可复用的片段，编辑模块时直接插入到富文本字段中
• 适合需要在不同位置灵活插入图标的场景，但要注意在前端渲染时控制SVG的样式，避免和页面样式冲突

内容的提问来源于stack exchange，提问作者Taste of Leaving