Circle Chevron Up icon

import { CircleChevronUp } from '@withicons/react'          // line (default style)
import { CircleChevronUp as CircleChevronUpSolid } from '@withicons/react/solid'

export function Example() {
  return (
    <>
      <CircleChevronUp size={24} />
      <CircleChevronUpSolid size={24} color="#FF5A36" title="Circle Chevron Up" />
    </>
  )
}

<script setup>
import { CircleChevronUp } from '@withicons/vue'          // line (default style)
import { CircleChevronUp as CircleChevronUpSolid } from '@withicons/vue/solid'
</script>

<template>
  <CircleChevronUp :size="24" />
  <CircleChevronUpSolid :size="24" title="Circle Chevron Up" />
</template>

<script>
  import { CircleChevronUp } from '@withicons/svelte'          // line (default style)
  import { CircleChevronUp as CircleChevronUpSolid } from '@withicons/svelte/solid'
</script>

<CircleChevronUp size={24} />
<CircleChevronUpSolid size={24} title="Circle Chevron Up" />

import { Component } from '@angular/core'
import { WithIconComponent, CircleChevronUp } from '@withicons/angular'

@Component({
  selector: 'app-example',
  imports: [WithIconComponent],
  template: `<with-icon [icon]="CircleChevronUp" [size]="24" title="Circle Chevron Up" />`,
})
export class ExampleComponent { CircleChevronUp = CircleChevronUp }

import { CircleChevronUp } from '@withicons/solid'          // line (default style)
import { CircleChevronUp as CircleChevronUpSolid } from '@withicons/solid/solid'

export const Example = () => <CircleChevronUp size={24} />

<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/web@latest/dist/cdn.js"></script>

<with-icon name="circle-chevron-up"></with-icon>
<with-icon name="circle-chevron-up" variant="solid" size="32" label="Circle Chevron Up"></with-icon>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion@latest/dist/motion.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@withicons/motion@latest/dist/icons/circle-chevron-up.css">  <!-- this icon's own moves -->

<!-- always moving: pulse -->
<span class="wm wm-loop" data-wm="circle-chevron-up"><i class="with with-circle-chevron-up"></i></span>

<!-- moves when the button is hovered or focused: pop -->
<button class="wm-trigger"><span class="wm wm-hover" data-wm="circle-chevron-up"><i class="with with-circle-chevron-up"></i></span> Circle Chevron Up</button>

<!-- click to turn circle-chevron-up into circle-chevron-down: the button's aria-pressed decides the icon.
     Timing: --wm-swap-dur, --wm-swap-ease, --wm-swap-delay. On its own: wm-swap-auto (+ --wm-swap-hold) -->
<button class="wm-trigger" type="button" aria-pressed="false" aria-label="Circle Chevron Up"
        onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">
  <span class="wm-swap wm-fx-rotate">
    <i class="with with-circle-chevron-up wm-a"></i>
    <i class="with with-circle-chevron-down wm-b"></i>
  </span>
</button>