Vue

SmartIcon

Introduction

The Vue version of SmartIcon component is an intelligent icon selector that automatically renders the most suitable icon component based on keywords. It supports multiple keywords, prioritizing the first matching icon, and renders a default icon when no match is found. This component is particularly suitable for scenarios that require dynamic icon selection based on content, such as search result display and content category presentation.

Examples

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" />
            <span style="font-size: 0.875rem; color: #6b7280;">home</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="person" />
            <span style="font-size: 0.875rem; color: #6b7280;">person</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="account" />
            <span style="font-size: 0.875rem; color: #6b7280;">account</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">profile</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="code" />
            <span style="font-size: 0.875rem; color: #6b7280;">code</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="github" />
            <span style="font-size: 0.875rem; color: #6b7280;">github</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="tools" />
            <span style="font-size: 0.875rem; color: #6b7280;">tools</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="edit" />
            <span style="font-size: 0.875rem; color: #6b7280;">edit</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="delete" />
            <span style="font-size: 0.875rem; color: #6b7280;">delete</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="save" />
            <span style="font-size: 0.875rem; color: #6b7280;">save</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">user profile</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search,find" />
            <span style="font-size: 0.875rem; color: #6b7280;">search,find</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings config" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings config</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home,main,index" />
            <span style="font-size: 0.875rem; color: #6b7280;">home,main,index</span>
        </div>
    </div>
</template>

Props

class

Customize the style class name of the smart icon through the class property.

默认样式

自定义样式

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">默认样式</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">默认样式</span>
        </div>
    </div>
</template>

默认样式

自定义样式

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" class="custom-icon" />
            <span style="font-size: 0.875rem; color: #6b7280;">自定义样式</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" class="custom-icon" />
            <span style="font-size: 0.875rem; color: #6b7280;">自定义样式</span>
        </div>
    </div>
</template>

<style scoped>
.custom-icon {
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease-in-out;
}

.custom-icon:hover {
    transform: scale(1.1);
}
</style>

color

Customize the color of the smart icon through the color property.

蓝色

绿色

橙色

红色

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" color="#3b82f6" />
            <span style="font-size: 0.875rem; color: #6b7280;">蓝色</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" color="#10b981" />
            <span style="font-size: 0.875rem; color: #6b7280;">绿色</span>
        </div>
    </div>
</template>

蓝色

绿色

橙色

红色

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" color="#f59e0b" />
            <span style="font-size: 0.875rem; color: #6b7280;">橙色</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" color="#ef4444" />
            <span style="font-size: 0.875rem; color: #6b7280;">红色</span>
        </div>
    </div>
</template>

keyword

Specify keywords for icon matching through the keyword property, supporting multiple keywords separated by spaces or commas.

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" />
            <span style="font-size: 0.875rem; color: #6b7280;">home</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" />
            <span style="font-size: 0.875rem; color: #6b7280;">user</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="person" />
            <span style="font-size: 0.875rem; color: #6b7280;">person</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="account" />
            <span style="font-size: 0.875rem; color: #6b7280;">account</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">profile</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="code" />
            <span style="font-size: 0.875rem; color: #6b7280;">code</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="github" />
            <span style="font-size: 0.875rem; color: #6b7280;">github</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="tools" />
            <span style="font-size: 0.875rem; color: #6b7280;">tools</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" />
            <span style="font-size: 0.875rem; color: #6b7280;">search</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="edit" />
            <span style="font-size: 0.875rem; color: #6b7280;">edit</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="delete" />
            <span style="font-size: 0.875rem; color: #6b7280;">delete</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="save" />
            <span style="font-size: 0.875rem; color: #6b7280;">save</span>
        </div>
    </div>
</template>

user

settings

home

user

person

account

profile

code

github

settings

tools

edit

delete

save

user profile

search,find

settings config

home,main,index

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user profile" />
            <span style="font-size: 0.875rem; color: #6b7280;">user profile</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search,find" />
            <span style="font-size: 0.875rem; color: #6b7280;">search,find</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings config" />
            <span style="font-size: 0.875rem; color: #6b7280;">settings config</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home,main,index" />
            <span style="font-size: 0.875rem; color: #6b7280;">home,main,index</span>
        </div>
    </div>
</template>

size

Control the size of the smart icon through the size property.

16px

20px

32px

48px

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="user" size="16px" />
            <span style="font-size: 0.875rem; color: #6b7280;">16px</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="search" size="20px" />
            <span style="font-size: 0.875rem; color: #6b7280;">20px</span>
        </div>
    </div>
</template>

16px

20px

32px

48px

<script setup lang="ts">
import { SmartIcon } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="settings" size="32px" />
            <span style="font-size: 0.875rem; color: #6b7280;">32px</span>
        </div>
        <div style="display: flex; flex-direction: column; align-items: center; gap: 0.5rem;">
            <SmartIcon keyword="home" size="48px" />
            <span style="font-size: 0.875rem; color: #6b7280;">48px</span>
        </div>
    </div>
</template>

Keyword Examples

SmartIcon supports various types of keywords, including user-related, technology-related, action-related, and more. It also supports the combination of multiple keywords, separated by spaces or commas, with the system searching for matching icons in order.

Supported Keyword Types

User Related: user, person, account, profile
Technology Related: code, github, settings, tools
Action Related: search, edit, delete, save
Multi-Keyword Support: Supports combinations like “user profile”, “search,find”, etc.