How do I scale the icon size of SVGs in wheelnav.js?

440 views Asked by At

Is it possible to scale the size of the icons used within each wheel segment based on a breakpoint (ie. 1024 and over)?

e.g.:

if(window.innerWidth >= 1024){
 // wheel.sliceTransformCustom = makeIconsBigger!
}

I've got this working spectacularly well for my requirements, and this is the last hurdle :)

enter image description here

Updated with solution based on answer (decided to make icons smaller as lower resolutions to keep fidelity):

if(window.innerWidth < 1024){     
      wheel.sliceTransformFunction = sliceTransform().CustomTitleTransform;      
      wheel.sliceTransformCustom = new sliceTransformCustomization();    
      wheel.sliceTransformCustom.scaleString = "s0.65";

      wheel.sliceSelectedTransformFunction = sliceTransform().CustomTitleTransform;
      wheel.sliceSelectedTransformCustom = new sliceTransformCustomization();    
      wheel.sliceSelectedTransformCustom.scaleString = "s0.65";
}
1

There are 1 answers

2
Gábor Berkesi On BEST ANSWER

You can use ScaleTitleTransform for this.

if(window.innerWidth >= 1024){
   wheel.sliceTransformFunction = sliceTransform().ScaleTitleTransform;
} 

There is an example here

The ScaleTitleTransform default scale is 1.3. You can find the default function here