CoolIcon | Sard

介绍

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

代码演示

椭圆

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

vue

<template>
  <s-flex vertical gap="large">
    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="oval" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

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

    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="oval" background="#ffedd4" color="#ffa726">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

      <s-cool-icon shape="oval" background="#fad5e8" color="#e72f8c">
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>
  </s-flex>
</template>

圆形

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

vue

<template>
  <s-flex vertical gap="large">
    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="circle" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

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

    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="circle" background="#ffedd4" color="#ffa726">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

      <s-cool-icon shape="circle" background="#fad5e8" color="#e72f8c">
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>
  </s-flex>
</template>

方形

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

vue

<template>
  <s-flex vertical gap="large">
    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="square" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

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

    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="square" background="#ffedd4" color="#ffa726">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

      <s-cool-icon shape="square" background="#fad5e8" color="#e72f8c">
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>
  </s-flex>
</template>

三角形

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

vue

<template>
  <s-flex vertical gap="large">
    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="triangle" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

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

    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="triangle" background="#ffedd4" color="#ffa726">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

      <s-cool-icon shape="triangle" background="#fad5e8" color="#e72f8c">
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>
  </s-flex>
</template>

花朵

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

vue

<template>
  <s-flex vertical gap="large">
    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="flower" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

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

    <s-flex justify="evenly" gap="medium">
      <s-cool-icon shape="flower" background="#ffedd4" color="#ffa726">
        <demo-icon name="skype-fill" />
      </s-cool-icon>

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

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

      <s-cool-icon shape="flower" background="#fad5e8" color="#e72f8c">
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>
  </s-flex>
</template>

尺寸

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

vue

<template>
  <s-flex vertical gap="large">
    <s-flex justify="evenly" align="center" gap="medium">
      <s-cool-icon size="40px" icon-size="24px" shape="oval" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>
      <s-cool-icon size="50px" icon-size="30px" shape="oval" background="#892fe8" color="#fff">
        <demo-icon name="spotify-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="60px"
        icon-size="36px"
        shape="oval"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <demo-icon name="paypal-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="80px"
        icon-size="48px"
        shape="oval"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>

    <s-flex justify="evenly" align="center" gap="medium">
      <s-cool-icon size="40px" icon-size="24px" shape="circle" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>
      <s-cool-icon size="50px" icon-size="30px" shape="circle" background="#892fe8" color="#fff">
        <demo-icon name="spotify-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="60px"
        icon-size="36px"
        shape="circle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <demo-icon name="paypal-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="80px"
        icon-size="48px"
        shape="circle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>

    <s-flex justify="evenly" align="center" gap="medium">
      <s-cool-icon size="40px" icon-size="24px" shape="square" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>
      <s-cool-icon size="50px" icon-size="30px" shape="square" background="#892fe8" color="#fff">
        <demo-icon name="spotify-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="60px"
        icon-size="36px"
        shape="square"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <demo-icon name="paypal-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="80px"
        icon-size="48px"
        shape="square"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>

    <s-flex justify="evenly" align="center" gap="medium">
      <s-cool-icon size="40px" shape="triangle" icon-size="24px" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>
      <s-cool-icon size="50px" icon-size="30px" shape="triangle" background="#892fe8" color="#fff">
        <demo-icon name="spotify-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="60px"
        icon-size="36px"
        shape="triangle"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <demo-icon name="paypal-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="80px"
        icon-size="48px"
        shape="triangle"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>

    <s-flex justify="evenly" align="center" gap="medium">
      <s-cool-icon size="40px" icon-size="24px" shape="flower" background="#ffa726" color="#fff">
        <demo-icon name="skype-fill" />
      </s-cool-icon>
      <s-cool-icon size="50px" icon-size="30px" shape="flower" background="#892fe8" color="#fff">
        <demo-icon name="spotify-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="60px"
        icon-size="36px"
        shape="flower"
        background="linear-gradient(45deg,#00d1ff,#69ff97)"
        color="#fff"
      >
        <demo-icon name="paypal-fill" />
      </s-cool-icon>
      <s-cool-icon
        size="80px"
        icon-size="48px"
        shape="flower"
        background="linear-gradient(45deg,#ff3181,#ff8331)"
        color="#fff"
      >
        <demo-icon name="youtube-fill" />
      </s-cool-icon>
    </s-flex>
  </s-flex>
</template>

API

CoolIconProps

属性	描述	类型	默认值
shape	设置外框的形状	'circle' \| 'square' \| 'oval' \| 'triangle' \| 'flower'	'oval'
color	设置图标颜色	string	-
background	设置外框背景色颜色	string	-
size	设置外框尺寸	string	-
icon-size	设置图标尺寸	string	-

CoolIconSlots

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

主题定制

样式变量

CSS 变量	值
`--s-cool-icon-size`	`50px`
`--s-cool-icon-icon-size`	`30px`
`--s-cool-icon-oval-border-radius`	`43% 57% / 57% 43%`
`--s-cool-icon-square-border-radius`	`25%`
`--s-cool-icon-triangle-border-radius`	`68% 32% 40% 60%/44% 34% 66% 56%`
`--s-cool-icon-shadow-opacity`	`0.4`
`--s-cool-icon-adorn-bg`	`rgba(255, 255, 255, 0.2)`

介绍 ​

代码演示 ​

椭圆 ​

圆形 ​

方形 ​

三角形 ​

花朵 ​

尺寸 ​

API ​

CoolIconProps ​

CoolIconSlots ​

主题定制 ​

样式变量 ​

介绍

代码演示

椭圆

圆形

方形

三角形

花朵

尺寸

API

CoolIconProps

CoolIconSlots

主题定制

样式变量