@ckpack/v-ui

#Icon

This is an icon component that you can use by passing it an svg string or symbol.

TIP

Its principle is very simple, set the initial style of svg through the following css.

This allows to control svg size via font-size

css

svg {
   width: '1em';
   height: '1em';
}

This allows to control svg color via color

css

svg {
   fill: 'currentcolor'; // So for multi-color icon color related properties will be invalid.
}

Basic usage

define icons via svg

vue

<script setup lang="ts">
const svgs = [
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="m512 747.84 228.16 119.936a6.4 6.4 0 0 0 9.28-6.72l-43.52-254.08 184.512-179.904a6.4 6.4 0 0 0-3.52-10.88l-255.104-37.12L517.76 147.904a6.4 6.4 0 0 0-11.52 0L392.192 379.072l-255.104 37.12a6.4 6.4 0 0 0-3.52 10.88L318.08 606.976l-43.584 254.08a6.4 6.4 0 0 0 9.28 6.72L512 747.84zM313.6 924.48a70.4 70.4 0 0 1-102.144-74.24l37.888-220.928L88.96 472.96A70.4 70.4 0 0 1 128 352.896l221.76-32.256 99.2-200.96a70.4 70.4 0 0 1 126.208 0l99.2 200.96 221.824 32.256a70.4 70.4 0 0 1 39.04 120.064L774.72 629.376l37.888 220.928a70.4 70.4 0 0 1-102.144 74.24L512 820.096l-198.4 104.32z"></path></svg>',
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M640 832a128 128 0 0 1-256 0h256zm192-64H134.4a38.4 38.4 0 0 1 0-76.8H192V448c0-154.88 110.08-284.16 256.32-313.6a64 64 0 1 1 127.36 0A320.128 320.128 0 0 1 832 448v243.2h57.6a38.4 38.4 0 0 1 0 76.8H832z"></path></svg>',
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path></svg>',
  '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-029747aa=""><path fill="currentColor" d="M832 512a32 32 0 1 1 64 0v352a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V160a32 32 0 0 1 32-32h352a32 32 0 0 1 0 64H192v640h640V512z"></path><path fill="currentColor" d="m469.952 554.24 52.8-7.552L847.104 222.4a32 32 0 1 0-45.248-45.248L477.44 501.44l-7.552 52.8zm422.4-422.4a96 96 0 0 1 0 135.808l-331.84 331.84a32 32 0 0 1-18.112 9.088L436.8 623.68a32 32 0 0 1-36.224-36.224l15.104-105.6a32 32 0 0 1 9.024-18.112l331.904-331.84a96 96 0 0 1 135.744 0z"></path></svg>',
];
</script>

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-icon v-for="svg in svgs" :key="svg" :svg="svg" />
    </v-space>
  </v-space>
</template>

Resize

use size to adjust icon [size]

Icon angle

define icon angle via rotate

Rotate icon

define icon auto-rotation via spin

Icon color

define icon color via color

Icon hover color

define icon hover color via hover-color

Multicolor icons

You can also use multi-color icons but this will invalidate the color-related properties.

vue

<script setup lang="ts">
const panda = '<svg t="1672830187767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2187" width="200" height="200"><path d="M512 512m-508 0a508 508 0 1 0 1016 0 508 508 0 1 0-1016 0Z" fill="#F3756F" p-id="2188"></path><path d="M289.2 211.2c17.2 1.6 30.4 14.8 42 27.6 14.8 16 29.6 32.4 44.4 48.4 7.2 8 15.2 17.6 12.8 28.4-1.6 6.8-6.8 11.6-12 16-42.4 37.6-86.4 73.2-132.4 106.4-16.8-15.6-28.4-36-33.6-58.4-3.6-16-3.6-32.4-3.6-48.4 0-19.6 0-40 8-57.6 4.8-10.8 12.8-20 20.4-29.2 14.4-16.4 32-35.2 54-33.2zM734.8 211.2c-17.2 1.6-30.4 14.8-42 27.6-14.8 16-29.6 32.4-44.4 48.4-7.2 8-15.2 17.6-12.8 28.4 1.6 6.8 6.8 11.6 12 16 42.4 37.6 86.4 73.2 132.4 106.4 16.8-15.6 28.4-36 33.6-58.4 3.6-16 3.6-32.4 3.6-48.4 0-19.6 0-40-8-57.6-4.8-10.8-12.8-20-20.4-29.2-14.4-16.4-32-35.2-54-33.2z" fill="#08070C" p-id="2189"></path><path d="M211.2 549.6c6.4 15.6 12.8 31.6 24 43.6 11.2 12.4 29.6 20 44.8 13.6 9.2-3.6 16.4-11.6 23.6-18.8 34.8-34 84-52 132.4-48-10 39.6-23.6 78.4-40.4 116-13.6 30-29.6 63.6-19.6 94.8 8.4 26.4 23.2 43.6 46.8 58.4 8 4.8 26.4 10 35.6 11.2 18 2 36.8-11.2 53.6-4.8 16.8-6.4 35.6 6.8 53.6 4.8 9.2-1.2 28.8-6 36.8-11.2 23.6-14.8 37.2-32 45.6-58.4 10-31.6-6-64.8-19.6-94.8-16.8-37.2-30.4-76-40.4-116 48-4 97.6 14 132.4 48 7.2 7.2 14 15.2 23.6 18.8 15.6 6 33.6-1.6 44.8-13.6 11.2-12.4 17.6-28.4 24-43.6 3.2-7.6 8.4-16 14.4-21.2-2-25.2-6-50.4-14-74.4-6.4-18.8-15.2-36.8-24.4-54.4-18.8-35.2-41.2-70-73.2-94-25.2-19.2-55.2-30.4-84.8-41.6-24.8-9.2-50.8-18.8-76.8-22.4-2.4-0.4-4.8-0.8-7.2-0.8-1.2 0-2.4-0.4-3.6-0.4h-1.2c-8.8-0.8-18.8-1.2-30-1.2-10.8 0-21.2 0.4-30 1.2h-1.2c-1.2 0-2.4 0.4-3.6 0.4-2.4 0.4-4.8 0.4-7.2 0.8-26 3.6-52 13.2-76.8 22.4-29.6 11.2-59.6 22.4-84.8 41.6-32 24-54.4 58.8-73.2 94-9.2 17.6-18 35.6-24.4 54.4-8 24-12 49.2-14 74.4 6 5.2 11.2 13.6 14.4 21.2z" fill="#E9E9E7" p-id="2190"></path><path d="M215.6 688.8c16 44 44 84.4 82.4 110.8 23.6 16.4 50.8 27.2 77.6 37.6 43.6 17.2 90 34.8 136 32.8 46.4 2 92.4-15.6 136-32.8 26.8-10.4 54-21.2 77.6-37.6 38.4-26.4 66.4-66.8 82.4-110.8s21.2-91.6 20-138.4c0-7.2-0.4-14.8-1.2-22-6 5.2-11.2 13.6-14.4 21.2-6.4 15.6-12.8 31.6-24 43.6-11.2 12.4-29.6 20-44.8 13.6-9.2-3.6-16.4-11.6-23.6-18.8-34.8-34-84-52-132.4-48 10 39.6 23.6 78.4 40.4 116 13.6 30 29.6 63.6 19.6 94.8-8.4 26.4-22 43.6-45.6 58.4-8 4.8-27.6 10-36.8 11.2-18 2-36.8-11.2-53.6-4.8-16.8-6.4-35.6 6.8-53.6 4.8-9.2-1.2-27.6-6-35.6-11.2-23.6-14.8-38-32-46.8-58.4-10-31.6 6-64.8 19.6-94.8 16.8-37.2 30.4-76 40.4-116-48-4-97.6 14-132.4 48-7.2 7.2-14 15.2-23.6 18.8-15.6 6-33.6-1.6-44.8-13.6-11.2-12.4-17.6-28.4-24-43.6-3.2-7.6-8.4-16-14.4-21.2-0.4 7.2-0.8 14.8-1.2 22-0.4 46.8 4.8 94.4 20.8 138.4z" fill="#BBC2C6" p-id="2191"></path><path d="M609.2 802.4c-5.6 4-11.6 8.4-18 10.8-6.4 2.4-13.6 2.8-20.4 2.8-13.6 0-26.8-1.2-40-3.6-2-0.4-4-0.8-5.6-2-2-1.6-3.2-4-4-6.8-1.2-4-2.8-8.4-1.2-12.4 2-5.2 8-7.6 12.8-10.4 6.8-3.2 12.8-7.6 18.8-12 8-5.6 15.6-11.2 23.6-16.8 6.4-4.8 13.6-10 15.2-18 1.6-7.6-3.2-16.8-10.8-18.8-2.8-0.8-5.6-0.8-8.4-0.4-13.2 0.4-26.8 0.8-40 1.6-6.8 0.4-31.2 0.4-38 0-13.2-0.4-26.8-0.8-40-1.6-2.8 0-5.6 0-8.4 0.4-7.6 2-12.4 10.8-10.8 18.8 1.6 8 8.8 13.2 15.2 18 8 5.6 15.6 11.2 23.6 16.8 6 4.4 12 8.8 18.8 12 5.2 2.4 11.2 4.8 12.8 10.4 1.2 4 0 8.4-1.2 12.4-0.8 2.4-1.6 5.2-4 6.8-1.6 1.2-3.6 1.6-5.6 2-13.2 2.4-26.8 4-40 3.6-6.8 0-14-0.4-20.4-2.8-6.8-2.4-12.4-6.4-18-10.8-6.4-4.8-13.2-9.6-19.6-14.4 4.4 6 9.2 12 13.6 17.6 2.4 3.2 4.8 6.4 8.4 8.8 3.2 2.4 7.2 3.6 11.2 4.8 4.4 1.6 8.8 2.8 13.2 3.6 7.2 1.6 14.4 1.6 21.6 1.6 16.4 0 32.4 0 48.8-0.4 16.4 0.4 32.4 0.4 48.8 0.4 7.2 0 14.4 0 21.6-1.6 4.4-0.8 8.8-2.4 13.2-3.6 4-1.2 8-2.4 11.2-4.8 3.2-2.4 5.6-5.6 8.4-8.8 4.4-6 9.2-12 13.6-17.6-6.8 4.8-13.6 9.6-20 14.4z" fill="#030303" p-id="2192"></path><path d="M373.2 496.8c2-4.8 2.8-9.6 5.6-14s7.6-7.2 12-10c9.6-6 20.8-12 31.6-8 3.6 1.2 6.8 3.6 10 6.4 8.4 7.2 16.4 15.2 20.4 25.6 4.4 10.8 4 22.8 1.2 34-4.4 19.2-15.2 36.4-26 53.2-17.2 27.2-36.8 56-67.2 66.8-6.8 2.4-14.8 4-21.2 0-2-1.2-4-3.2-5.6-5.2-2.8-3.2-6-6.4-8.8-10-10.4-11.6-21.2-24-26.8-38.8-1.2-2.8-2-6-1.6-8.8 0.4-3.2 2.4-5.6 4-8.4 10.8-16 22-32.4 36.8-45.6 13.2-11.6 29.2-21.2 35.6-37.2z" fill="#08070C" p-id="2193"></path><path d="M439.2 542.4c0 3.2-2.4 6-5.2 7.6-2.8 1.6-6 2-8.8 3.2-5.6 1.6-10.8 4.4-16.4 5.6-5.6 1.6-11.6 1.6-16.8-1.2-8-4.8-9.6-15.6-10-25.2 0-6 0-12.8 3.6-18 2-3.2 5.2-5.6 8-7.6 5.2-4 11.2-8.4 17.6-7.6 4.8 0.4 9.2 3.6 12 7.2 3.2 3.6 4.8 8.4 6.8 12.8 2.4 6 5.2 12 7.6 18 0.8 1.6 1.6 3.6 1.6 5.2z" fill="#302D3D" p-id="2194"></path><path d="M429.2 538c0.4 0.8 0.4 1.6 0.4 2.4 0 1.2-1.2 2-2 2.8-4.8 4.8-11.2 9.2-18 8-4-0.8-7.2-3.6-10.4-6-2-1.6-3.6-3.2-5.2-5.2-4.4-5.6-6.4-12.8-6.8-19.6 0-0.8 0-1.6 0.4-2.4 0.4-1.2 1.2-2 2.4-2.8 4.8-4 10.4-8 16.4-7.2 6 0.4 10.4 5.6 14 10.4 3.6 6 6.8 12.8 8.8 19.6z" fill="#010101" p-id="2195"></path><path d="M406 508c-5.2-0.4-9.6 2-13.6 5.2-0.8 2.8-1.2 5.6-1.2 8.8 0 13.2 8 24 17.6 24 8 0 14.8-7.2 16.8-17.2-1.6-3.6-3.6-7.2-6-10.8-3.2-4.8-7.6-9.6-13.6-10z" fill="#161525" p-id="2196"></path><path d="M398.8 526a8.4 7.6 90 1 0 15.2 0 8.4 7.6 90 1 0-15.2 0Z" fill="#010101" p-id="2197"></path><path d="M402.4 520.8m-4.8 0a4.8 4.8 0 1 0 9.6 0 4.8 4.8 0 1 0-9.6 0Z" fill="#FFFFFF" p-id="2198"></path><path d="M408.8 528.8m-2.4 0a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 1 0-4.8 0Z" fill="#FFFFFF" p-id="2199"></path><path d="M661.2 496.8c-2-4.8-2.8-9.6-5.6-14s-7.6-7.2-12-10c-9.6-6-20.8-12-31.6-8-3.6 1.2-6.8 3.6-10 6.4-8.4 7.2-16.4 15.2-20.4 25.6-4.4 10.8-4 22.8-1.2 34 4.4 19.2 15.2 36.4 26 53.2 17.2 27.2 36.8 56 67.2 66.8 6.8 2.4 14.8 4 21.2 0 2-1.2 4-3.2 5.6-5.2 2.8-3.2 6-6.4 8.8-10 10.4-11.6 21.2-24 26.8-38.8 1.2-2.8 2-6 1.6-8.8-0.4-3.2-2.4-5.6-4-8.4-10.8-16-22-32.4-36.8-45.6-13.6-11.6-29.6-21.2-35.6-37.2z" fill="#08070C" p-id="2200"></path><path d="M595.2 542.4c0 3.2 2.4 6 5.2 7.6 2.8 1.6 6 2 8.8 3.2 5.6 1.6 10.8 4.4 16.4 5.6 5.6 1.6 11.6 1.6 16.8-1.2 8-4.8 9.6-15.6 10-25.2 0-6 0-12.8-3.6-18-2-3.2-5.2-5.6-8-7.6-5.2-4-11.2-8.4-17.6-7.6-4.8 0.4-9.2 3.6-12 7.2-3.2 3.6-4.8 8.4-6.8 12.8-2.4 6-5.2 12-7.6 18-0.8 1.6-1.6 3.6-1.6 5.2z" fill="#302D3D" p-id="2201"></path><path d="M605.2 538c-0.4 0.8-0.4 1.6-0.4 2.4 0 1.2 1.2 2 2 2.8 4.8 4.8 11.2 9.2 18 8 4-0.8 7.2-3.6 10.4-6 2-1.6 3.6-3.2 5.2-5.2 4.4-5.6 6.4-12.8 6.8-19.6 0-0.8 0-1.6-0.4-2.4-0.4-1.2-1.2-2-2.4-2.8-4.8-4-10.4-8-16.4-7.2-6 0.4-10.4 5.6-14 10.4-3.6 6-6.8 12.8-8.8 19.6z" fill="#010101" p-id="2202"></path><path d="M628.4 508c5.2-0.4 9.6 2 13.6 5.2 0.8 2.8 1.2 5.6 1.2 8.8 0 13.2-8 24-17.6 24-8 0-14.8-7.2-16.8-17.2 1.6-3.6 3.6-7.2 6-10.8 3.2-4.8 7.6-9.6 13.6-10z" fill="#161525" p-id="2203"></path><path d="M620.4 526a8.4 7.6 90 1 0 15.2 0 8.4 7.6 90 1 0-15.2 0Z" fill="#010101" p-id="2204"></path><path d="M631.6 520.8m-4.8 0a4.8 4.8 0 1 0 9.6 0 4.8 4.8 0 1 0-9.6 0Z" fill="#FFFFFF" p-id="2205"></path><path d="M625.2 528.8m-2.4 0a2.4 2.4 0 1 0 4.8 0 2.4 2.4 0 1 0-4.8 0Z" fill="#FFFFFF" p-id="2206"></path><path d="M462 729.2c-2.8 2-3.2 6-3.2 9.6 0 1.2 0 2.8 0.8 3.6 0.4 0.8 0.8 1.2 1.6 1.6 2 2 4 3.6 6 5.6 2.8 2.4 5.2 5.2 8.4 6.8 3.2 2 6.8 3.2 10.4 2.8 0.4 0 0.8 0 0.8-0.4 0.4-0.4 0.4-0.4 0.4-0.8 1.2-8.8-3.2-17.6-7.6-24.8-1.2-1.6-2-3.2-3.6-4.4-2-1.2-4.8-1.2-7.2-1.2-2.8 0.4-4.8 0.4-6.8 1.6zM562 729.2c2.8 2 3.2 6 3.2 9.6 0 1.2 0 2.8-0.8 3.6-0.4 0.8-0.8 1.2-1.6 1.6-2 2-4 3.6-6 5.6-2.8 2.4-5.2 5.2-8.4 6.8-3.2 2-6.8 3.2-10.4 2.8-0.4 0-0.8 0-0.8-0.4-0.4-0.4-0.4-0.4-0.4-0.8-1.2-8.8 3.2-17.6 7.6-24.8 1.2-1.6 2-3.2 3.6-4.4 2-1.2 4.8-1.2 7.2-1.2 2.8 0.4 4.8 0.4 6.8 1.6z" fill="#1F1E24" p-id="2207"></path></svg>';
</script>

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-icon :svg="panda" size="4rem" />
      <v-icon :svg="panda" spin size="4rem" />
    </v-space>
  </v-space>
</template>

icon cursor

define icon cursor via cursor

API

icon property

property name	description	type	default value
svg	svg content or svg symbol	`enum`	-
size	Icon size	length	Inherited font size
spin	Whether to automatically rotate the icon	`boolean`	false
rotate	icon default rotation	`number`	0
color	icon color	`string`	inherited color
hover-color	icon hover color	`string`	inherited color
cursor	icon cursor	`string`	default

other

Use iconfont

The page introduces the icon code of Symbol type

html

<script src="at.alicdn.com/t/font_2126466_0k1uy4dafct.js" />

Pass in the Symbol that refers to the icon

vue

<script setup lang="ts">
const svgs = [
  'icon-shanchu',
  'icon-home',
  'icon-logo',
];
</script>

<template>
  <v-space direction="column">
    <v-space wrap>
      <v-icon v-for="svg in svgs" :key="svg" :svg="svg" />
    </v-space>
  </v-space>
</template>

Basic usage ​

Resize ​

Icon angle ​

Rotate icon ​

Icon color ​

Icon hover color ​

Multicolor icons ​

icon cursor ​

API ​

icon property ​

other ​

Use iconfont ​