介绍

为一般的图标添加颜色、外框、背景和装饰物等元素，让其变得炫酷，可在缺少设计时也能展示不一般的效果。

引入

import CoolIcon from 'sard-uniapp/components/cool-icon/cool-icon.vue'

代码演示

椭圆

把图标放置在默认插槽，使用 background 属性设置外框背景色，使用 color 属性设置图标颜色，使用 shape="oval" 属性设置外框为椭圆形，就能得到一个精致漂亮的图标。

<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly">
      <sar-cool-icon shape="oval" background="#ffa726" color="#fff">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="oval" background="#892fe8" color="#fff">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="oval"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="oval"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly">
      <sar-cool-icon shape="oval" background="#ffedd4" color="#ffa726">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="oval" background="#e7d5fa" color="#892fe8">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="oval" background="#d6f4fa" color="#31c9e8">
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="oval" background="#fad5e8" color="#e72f8c">
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>

圆形

使用 shape="circle" 属性设置外框为圆形。

<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly">
      <sar-cool-icon shape="circle" background="#ffa726" color="#fff">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="circle" background="#892fe8" color="#fff">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="circle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="circle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly">
      <sar-cool-icon shape="circle" background="#ffedd4" color="#ffa726">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="circle" background="#e7d5fa" color="#892fe8">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="circle" background="#d6f4fa" color="#31c9e8">
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="circle" background="#fad5e8" color="#e72f8c">
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>

方形

使用 shape="square" 属性设置外框为方形。

<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly">
      <sar-cool-icon shape="square" background="#ffa726" color="#fff">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="square" background="#892fe8" color="#fff">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="square"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="square"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly">
      <sar-cool-icon shape="square" background="#ffedd4" color="#ffa726">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="square" background="#e7d5fa" color="#892fe8">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="square" background="#d6f4fa" color="#31c9e8">
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="square" background="#fad5e8" color="#e72f8c">
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>

三角形

使用 shape="triangle" 属性设置外框为三角形。

<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly">
      <sar-cool-icon shape="triangle" background="#ffa726" color="#fff">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="triangle" background="#892fe8" color="#fff">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="triangle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="triangle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly">
      <sar-cool-icon shape="triangle" background="#ffedd4" color="#ffa726">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="triangle" background="#e7d5fa" color="#892fe8">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="triangle" background="#d6f4fa" color="#31c9e8">
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="triangle" background="#fad5e8" color="#e72f8c">
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>

花朵

使用 shape="flower" 属性设置外框为花朵形状。

<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly">
      <sar-cool-icon shape="flower" background="#ffa726" color="#fff">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="flower" background="#892fe8" color="#fff">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="flower"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon
        shape="flower"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly">
      <sar-cool-icon shape="flower" background="#ffedd4" color="#ffa726">
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="flower" background="#e7d5fa" color="#892fe8">
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="flower" background="#d6f4fa" color="#31c9e8">
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>

      <sar-cool-icon shape="flower" background="#fad5e8" color="#e72f8c">
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>

尺寸

使用 size 属性设置外框尺寸，使用 icon-size 设置图标尺寸。

<template>
  <sar-space direction="vertical" size="large">
    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="oval"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="oval"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="oval"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="oval"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="circle"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="circle"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="circle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="circle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="square"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="square"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="square"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="square"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        shape="triangle"
        icon-size="48rpx"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="triangle"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="triangle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="triangle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>

    <sar-space justify="evenly" align="center">
      <sar-cool-icon
        size="80rpx"
        icon-size="48rpx"
        shape="flower"
        background="#ffa726"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="skype-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="100rpx"
        icon-size="60rpx"
        shape="flower"
        background="#892fe8"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="spotify-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="120rpx"
        icon-size="72rpx"
        shape="flower"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="paypal-fill" />
      </sar-cool-icon>
      <sar-cool-icon
        size="160rpx"
        icon-size="96rpx"
        shape="flower"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <sar-icon family="demo-icons" name="youtube-fill" />
      </sar-cool-icon>
    </sar-space>
  </sar-space>
</template>

API

CoolIconProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
shape	设置外框的形状	'circle' | 'square' | 'oval' | 'triangle' | 'flower'	'oval'
color	设置图标颜色	string	-
background	设置外框背景色颜色	string	-
size	设置外框尺寸	string	-
icon-size	设置图标尺寸	string	-

CoolIconSlots

插槽	描述	属性
default	自定义默认内容	-

主题定制

CSS 变量

page,
.sar-portal {
  --sar-cool-icon-size: 100rpx;
  --sar-cool-icon-icon-size: 60rpx;
  --sar-cool-icon-oval-border-radius: 43% 57% / 57% 43%;
  --sar-cool-icon-square-border-radius: 25%;
  --sar-cool-icon-triangle-border-radius: 68% 32% 40% 60%/44% 34% 66% 56%;
  --sar-cool-icon-shadow-opacity: 0.4;
  --sar-cool-icon-adorn-bg: rgba(255, 255, 255, 0.2);
}