Rename SvgTransforms to SvgTransform, allow it to take a single transform.

lib/creature-symbol.tsx

@@ -15,7 +15,7 @@ import {
   svgRotate,
   svgScale,
   svgTransformOrigin,
-  SvgTransforms,
+  SvgTransform,
   svgTranslate,
 } from "./svg-transform";
 
@@ -118,8 +118,8 @@ type AttachmentTransformProps = {
 };
 
 const AttachmentTransform: React.FC<AttachmentTransformProps> = (props) => (
-  <SvgTransforms
-    transforms={[
+  <SvgTransform
+    transform={[
       svgTranslate(props.translate),
       svgTransformOrigin(props.transformOrigin, [
         svgScale(props.scale),
@@ -128,7 +128,7 @@ const AttachmentTransform: React.FC<AttachmentTransformProps> = (props) => (
     ]}
   >
     {props.children}
-  </SvgTransforms>
+  </SvgTransform>
 );
 
 const AttachedCreatureSymbol: React.FC<AttachedCreatureSymbolProps> = ({

lib/pages/creature-page.tsx

@@ -19,7 +19,7 @@ import {
   NestedCreatureSymbol,
 } from "../creature-symbol";
 import { HoverDebugHelper } from "../hover-debug-helper";
-import { svgScale, SvgTransforms } from "../svg-transform";
+import { svgScale, SvgTransform } from "../svg-transform";
 import { ColorWidget } from "../color-widget";
 import { NumericSlider } from "../numeric-slider";
 import { DEFAULT_BG_COLOR } from "../colors";
@@ -237,9 +237,9 @@ export const CreaturePage: React.FC<{}> = () => {
       <CreatureContext.Provider value={ctx}>
         <HoverDebugHelper>
           <AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
-            <SvgTransforms transforms={[svgScale(0.5)]}>
+            <SvgTransform transform={svgScale(0.5)}>
               <CreatureSymbol {...creature} />
-            </SvgTransforms>
+            </SvgTransform>
           </AutoSizingSvg>
         </HoverDebugHelper>
       </CreatureContext.Provider>

lib/pages/debug-page.tsx

@@ -4,7 +4,7 @@ import { CreatureContext, CreatureContextType } from "../creature-symbol";
 import { createCreatureSymbolFactory } from "../creature-symbol-factory";
 import { HoverDebugHelper } from "../hover-debug-helper";
 import { createSvgSymbolContext } from "../svg-symbol";
-import { svgScale, SvgTransforms } from "../svg-transform";
+import { svgScale, SvgTransform } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
 import { SymbolContextWidget } from "../symbol-context-widget";
 
@@ -66,9 +66,9 @@ export const DebugPage: React.FC<{}> = () => {
       <CreatureContext.Provider value={ctx}>
         <HoverDebugHelper>
           <AutoSizingSvg padding={20}>
-            <SvgTransforms transforms={[svgScale(0.5)]}>
+            <SvgTransform transform={svgScale(0.5)}>
               {EYE_CREATURE}
-            </SvgTransforms>
+            </SvgTransform>
           </AutoSizingSvg>
         </HoverDebugHelper>
       </CreatureContext.Provider>

lib/pages/mandala-page.tsx

@@ -17,7 +17,7 @@ import { VocabularyWidget } from "../vocabulary-widget";
 import {
   svgRotate,
   svgScale,
-  SvgTransforms,
+  SvgTransform,
   svgTranslate,
 } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
@@ -37,20 +37,20 @@ const MandalaCircle: React.FC<
   const center = getBoundingBoxCenter(props.data.bbox);
   const degreesPerItem = 360 / props.numSymbols;
   const symbol = (
-    <SvgTransforms
-      transforms={[
+    <SvgTransform
+      transform={[
         svgTranslate({ x: props.radius, y: 0 }),
         svgTranslate(reversePoint(center)),
       ]}
     >
       <SvgSymbolContent {...props} />
-    </SvgTransforms>
+    </SvgTransform>
   );
 
   const symbols = range(props.numSymbols).map((i) => (
-    <SvgTransforms
+    <SvgTransform
       key={i}
-      transforms={[svgRotate(degreesPerItem * i)]}
+      transform={svgRotate(degreesPerItem * i)}
       children={symbol}
     />
   ));
@@ -122,14 +122,14 @@ export const MandalaPage: React.FC<{}> = () => {
       </div>
       <HoverDebugHelper>
         <AutoSizingSvg padding={20} ref={svgRef} bgColor={bgColor}>
-          <SvgTransforms transforms={[svgScale(0.5)]}>
+          <SvgTransform transform={svgScale(0.5)}>
             <MandalaCircle
               data={symbol}
               radius={radius}
               numSymbols={numSymbols}
               {...symbolCtx}
             />
-          </SvgTransforms>
+          </SvgTransform>
         </AutoSizingSvg>
       </HoverDebugHelper>
     </>

lib/svg-transform.tsx

@@ -83,9 +83,13 @@ export function svgRotate(degrees: number): SvgTransform {
  * Like the SVG `transform` attribute, the transforms are applied in
  * the *reverse* order that they are specified.
  */
-export const SvgTransforms: React.FC<{
-  transforms: SvgTransform[];
+export const SvgTransform: React.FC<{
+  transform: SvgTransform[] | SvgTransform;
   children: any;
-}> = ({ transforms, children }) => {
-  return <g transform={getSvgCodeForTransforms(transforms)}>{children}</g>;
+}> = ({ transform, children }) => {
+  if (!Array.isArray(transform)) {
+    transform = [transform];
+  }
+
+  return <g transform={getSvgCodeForTransforms(transform)}>{children}</g>;
 };