How to use the omi.extractClass function in omi

if (props['svg-icon']) {
			props.svgIcon = JSON.parse(props['svg-icon'].replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"'))
		}
		const isActive = activeProp === props.value
		return (
			<button aria-selected="{isActive}" role="tab">
				<span class="mdc-tab__content">
					{props.icon &amp;&amp; <span aria-hidden="true" class="mdc-tab__icon material-icons">{props.icon}</span>}
					{props.svgIcon &amp;&amp; <span aria-hidden="true" class="mdc-tab__icon"></span>}
					<span class="mdc-tab__text-label">{vnode.attributes.label}</span>
				</span>
				<span>
					<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
				</span>
				<span class="mdc-tab__ripple"></span>
			</button>
		)
	}

render(props) {
    return (
      <ul>
        {props.list.map(item =&gt; <li class="mdc-image-list__item">
          {props.masonry ?
            <img src="{item.src}" class="mdc-image-list__image"> :
            <div class="mdc-image-list__image-aspect-container">
              <img src="{item.src}" class="mdc-image-list__image">
            </div>}

          <div class="mdc-image-list__supporting">
            <span class="mdc-image-list__label">{item.label}</span>
          </div>
        </li>)}


      </ul>

render(props) {
    return (
      <div>
        {props.children.map(child =&gt; {

          return (
            <div>{child.children}</div>
          )
        })}
      </div>
    )
  }
})

renderButton(vnode, activeProp) {
		const { attributes: props } = vnode
		//todo fix this?
		if (props['svg-icon']) {
			props.svgIcon = JSON.parse(props['svg-icon'].replace(/(['"])?([a-zA-Z0-9_]+)(['"])?:([^\/])/g, '"$2":$4').replace(/'([\s\S]*?)'/g, '"$1"'))
		}
		const isActive = activeProp === props.value
		return (
			<button aria-selected="{isActive}" role="tab">
				<span class="mdc-tab__content">
					{props.icon &amp;&amp; <span aria-hidden="true" class="mdc-tab__icon material-icons">{props.icon}</span>}
					{props.svgIcon &amp;&amp; <span aria-hidden="true" class="mdc-tab__icon"></span>}
					<span class="mdc-tab__text-label">{vnode.attributes.label}</span>
				</span>
				<span>
					<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
				</span>
				<span class="mdc-tab__ripple"></span>
			</button>
		)
	}

render(props) {
    return (
      <div>
        
      </div>
    )
  }
}

render(props) {
    return (
      <div>
        {
          props.chips.map((item, index) =&gt; {
            return <div tabindex="0"> this.chipClickHandle(index)}&gt;

              {(item.leading) &amp;&amp; <i class="{classNames('material-icons',">
                { (item.leading.icon &amp;&amp; typeof item.leading.icon === 'object') &amp;&amp; }
                { (item.leading.icon &amp;&amp; typeof item.leading.icon === 'string') &amp;&amp; item.leading.icon }</i></div></div>

render(props) {
    return (
      <ul>

        {Array.apply(0, Array(props.total)).map((x, i) =&gt;
          <li class="{this._getClass(i,">
            <div>
              <div class="_star-first">
                <i class="anticon anticon-star">
                  <svg aria-hidden="true" fill="{props.color" height="1em" width="1em" data-icon="star" class="" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                  </svg>
                </i>
              </div>
              <div class="_star-second">
                <i class="anticon anticon-star">
                  <svg aria-hidden="true" fill="#E8E8E8" height="1em" width="1em" data-icon="star" class="" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
                  </svg>
                </i>
              </div></div></li></ul>

render(props) {
    return (
      <div>
        {props.items.map((item, index) =&gt; {
          return <div class="{classNames('_item',">
            <div class="_item-tail">
            </div>
            <div class="_item-icon">
              <span class="icon">
                {item.state === state.DONE &amp;&amp; <i class="anticon anticon-check finish-icon">
                  <svg aria-hidden="true" fill="{document.body.style.getPropertyValue('--mdc-theme-primary')}" height="1em" width="1em" data-icon="check" class="" viewBox="64 64 896 896"></svg></i></span></div></div></div>

render(props) {
    return (
      <ul>
        {props.children.map((item, index) =&gt; {
          const props = {}
          const isActive = item.attributes &amp;&amp; item.attributes.active

          if (isActive) {
            props.class = 'active'
          } else {
            props.onClick = () =&gt; this.onClick(index)
          }

          return <li>{item.children[0]}</li>
        })}
      </ul>
    )
  }
})

render(props) {
    let itemProps = null
    if (props.itemMargin) {
      itemProps = { style: `margin:${props.itemMargin};` }
      delete props.itemMargin
    }

    return (
      <ul>
        {props.children.map(child =&gt; {
          return (
            <li class="_item">
              {child}
            </li>
          )
        })}
      </ul>
    )
  }
})