# Icon 图标

<template>
  <p><GeoAlt /> Location. <SuitHeartFill /> Heart.</p>
  <p>
    <Icon><GeoAlt /></Icon> Location. <Icon><SuitHeartFill /></Icon> Heart.
  </p>
</template>

<script>
import { defineComponent } from 'vue'
import { Icon } from 'comz'
import { SuitHeartFill, GeoAlt } from '@comz/icons'

export default defineComponent({
  components: {
    Icon,
    SuitHeartFill,
    GeoAlt
  }
})
</script>

<template>
  <Flex>
    <Icon spin><ArrowRepeat /></Icon>
    <Icon spin><ArrowClockwise /></Icon>
    <Icon spin><BrightnessHigh /></Icon>
  </Flex>
</template>

<script>
import { defineComponent } from 'vue'
import { Flex, Icon } from 'comz'
import { ArrowRepeat, ArrowClockwise, BrightnessHigh } from '@comz/icons'

export default defineComponent({
  components: {
    Flex,
    Icon,
    ArrowRepeat,
    ArrowClockwise,
    BrightnessHigh
  }
})
</script>

<template>
  <Flex>
    <Icon size="20px"><EmojiLaughingFill /></Icon>
    <Icon color="#348ec7"><EmojiLaughingFill /></Icon>
    <Icon link><EmojiLaughingFill /></Icon>
  </Flex>
</template>

<script>
import { defineComponent } from 'vue'
import { Flex, Icon } from 'comz'
import { EmojiLaughingFill } from '@comz/icons'

export default defineComponent({
  components: {
    Flex,
    Icon,
    EmojiLaughingFill
  }
})
</script>