48 changed files with 225 additions and 1301 deletions
@ -1,68 +0,0 @@ |
|||||||
import path from 'node:path' |
|
||||||
import fs from 'fs-extra' |
|
||||||
import inquirer from 'inquirer' |
|
||||||
import colors from 'picocolors' |
|
||||||
import pkg from '../../../package.json' |
|
||||||
|
|
||||||
async function generateIcon() { |
|
||||||
const dir = path.resolve(process.cwd(), 'node_modules/@iconify/json') |
|
||||||
|
|
||||||
const raw = await fs.readJSON(path.join(dir, 'collections.json')) |
|
||||||
|
|
||||||
const collections = Object.entries(raw).map(([id, v]) => ({ |
|
||||||
...(v as any), |
|
||||||
id, |
|
||||||
})) |
|
||||||
|
|
||||||
const choices = collections.map(item => ({ key: item.id, value: item.id, name: item.name })) |
|
||||||
|
|
||||||
inquirer |
|
||||||
.prompt([ |
|
||||||
{ |
|
||||||
type: 'list', |
|
||||||
name: 'useType', |
|
||||||
choices: [ |
|
||||||
{ key: 'local', value: 'local', name: 'Local' }, |
|
||||||
{ key: 'onLine', value: 'onLine', name: 'OnLine' }, |
|
||||||
], |
|
||||||
message: 'How to use icons?', |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'list', |
|
||||||
name: 'iconSet', |
|
||||||
choices, |
|
||||||
message: 'Select the icon set that needs to be generated?', |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'input', |
|
||||||
name: 'output', |
|
||||||
message: 'Select the icon set that needs to be generated?', |
|
||||||
default: 'src/components/Icon/data', |
|
||||||
}, |
|
||||||
]) |
|
||||||
.then(async (answers) => { |
|
||||||
const { iconSet, output, useType } = answers |
|
||||||
const outputDir = path.resolve(process.cwd(), output) |
|
||||||
await fs.ensureDir(outputDir) |
|
||||||
const genCollections = collections.filter(item => [iconSet].includes(item.id)) |
|
||||||
const prefixSet: string[] = [] |
|
||||||
for (const info of genCollections) { |
|
||||||
const data = await fs.readJSON(path.join(dir, 'json', `${info.id}.json`)) |
|
||||||
if (data) { |
|
||||||
const { prefix } = data |
|
||||||
const isLocal = useType === 'local' |
|
||||||
const icons = Object.keys(data.icons).map(item => `${isLocal ? `${prefix}:` : ''}${item}`) |
|
||||||
|
|
||||||
fs.writeFileSync( |
|
||||||
path.join(output, 'icons.data.ts'), |
|
||||||
`export default ${isLocal ? JSON.stringify(icons) : JSON.stringify({ prefix, icons })}`, |
|
||||||
) |
|
||||||
prefixSet.push(prefix) |
|
||||||
} |
|
||||||
} |
|
||||||
await fs.emptyDir(path.join(process.cwd(), 'node_modules/.vite')) |
|
||||||
console.log(`✨ ${colors.cyan(`[${pkg.name}]`)}` + ' - Icon generated successfully:' + `[${prefixSet}]`) |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
generateIcon() |
|
||||||
@ -1,69 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { computed, ref, unref, watchEffect } from 'vue' |
|
||||||
import type { AppSizeType } from '@/types/config' |
|
||||||
import type { DropMenu } from '@/components/Dropdown' |
|
||||||
import { Dropdown } from '@/components/Dropdown' |
|
||||||
import { Icon } from '@/components/Icon' |
|
||||||
import { sizeList } from '@/settings/sizeSetting' |
|
||||||
import { useAppStore } from '@/store/modules/app' |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
// 是否显示文本 |
|
||||||
showText: { type: Boolean, default: true }, |
|
||||||
// 更改时是否刷新界面 |
|
||||||
reload: { type: Boolean }, |
|
||||||
}) |
|
||||||
|
|
||||||
const appStore = useAppStore() |
|
||||||
|
|
||||||
const selectedKeys = ref<string[]>([]) |
|
||||||
|
|
||||||
const getSizeText = computed(() => { |
|
||||||
const key = selectedKeys.value[0] |
|
||||||
if (!key) |
|
||||||
return '' |
|
||||||
|
|
||||||
return sizeList.find(item => item.event === key)?.text |
|
||||||
}) |
|
||||||
|
|
||||||
watchEffect(() => { |
|
||||||
selectedKeys.value = [unref(appStore.getComponentSize as AppSizeType)] |
|
||||||
}) |
|
||||||
|
|
||||||
async function toggleSize(size: AppSizeType) { |
|
||||||
appStore.setComponentSize(size) |
|
||||||
selectedKeys.value = [size as string] |
|
||||||
props.reload && location.reload() |
|
||||||
} |
|
||||||
|
|
||||||
function handleMenuEvent(menu: DropMenu) { |
|
||||||
if (unref(appStore.getComponentSize) === menu.event) |
|
||||||
return |
|
||||||
|
|
||||||
toggleSize(menu.event as AppSizeType) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<Dropdown |
|
||||||
placement="bottom" |
|
||||||
:trigger="['click']" |
|
||||||
:drop-menu-list="sizeList" |
|
||||||
:selected-keys="selectedKeys" |
|
||||||
overlay-class-name="app-locale-picker-overlay" |
|
||||||
@menu-event="handleMenuEvent" |
|
||||||
> |
|
||||||
<span class="flex cursor-pointer items-center"> |
|
||||||
<Icon icon="mdi:format-size" /> |
|
||||||
<span v-if="showText" class="ml-1">{{ getSizeText }}</span> |
|
||||||
</span> |
|
||||||
</Dropdown> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style lang="less"> |
|
||||||
.app-locale-picker-overlay { |
|
||||||
.ant-dropdown-menu-item { |
|
||||||
min-width: 160px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,13 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { Icon } from '@/components/Icon' |
|
||||||
|
|
||||||
defineProps({ |
|
||||||
icon: String, |
|
||||||
}) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<span :class="$attrs.class"> |
|
||||||
<Icon :icon="icon" /> |
|
||||||
</span> |
|
||||||
</template> |
|
||||||
@ -1,793 +0,0 @@ |
|||||||
export default { |
|
||||||
prefix: 'ant-design', |
|
||||||
icons: [ |
|
||||||
'account-book-filled', |
|
||||||
'account-book-outlined', |
|
||||||
'account-book-twotone', |
|
||||||
'aim-outlined', |
|
||||||
'alert-filled', |
|
||||||
'alert-outlined', |
|
||||||
'alert-twotone', |
|
||||||
'alibaba-outlined', |
|
||||||
'align-center-outlined', |
|
||||||
'align-left-outlined', |
|
||||||
'align-right-outlined', |
|
||||||
'alipay-circle-filled', |
|
||||||
'alipay-circle-outlined', |
|
||||||
'alipay-outlined', |
|
||||||
'alipay-square-filled', |
|
||||||
'aliwangwang-filled', |
|
||||||
'aliwangwang-outlined', |
|
||||||
'aliyun-outlined', |
|
||||||
'amazon-circle-filled', |
|
||||||
'amazon-outlined', |
|
||||||
'amazon-square-filled', |
|
||||||
'android-filled', |
|
||||||
'android-outlined', |
|
||||||
'ant-cloud-outlined', |
|
||||||
'ant-design-outlined', |
|
||||||
'apartment-outlined', |
|
||||||
'api-filled', |
|
||||||
'api-outlined', |
|
||||||
'api-twotone', |
|
||||||
'apple-filled', |
|
||||||
'apple-outlined', |
|
||||||
'appstore-add-outlined', |
|
||||||
'appstore-filled', |
|
||||||
'appstore-outlined', |
|
||||||
'appstore-twotone', |
|
||||||
'area-chart-outlined', |
|
||||||
'arrow-down-outlined', |
|
||||||
'arrow-left-outlined', |
|
||||||
'arrow-right-outlined', |
|
||||||
'arrow-up-outlined', |
|
||||||
'arrows-alt-outlined', |
|
||||||
'audio-filled', |
|
||||||
'audio-muted-outlined', |
|
||||||
'audio-outlined', |
|
||||||
'audio-twotone', |
|
||||||
'audit-outlined', |
|
||||||
'backward-filled', |
|
||||||
'backward-outlined', |
|
||||||
'bank-filled', |
|
||||||
'bank-outlined', |
|
||||||
'bank-twotone', |
|
||||||
'bar-chart-outlined', |
|
||||||
'barcode-outlined', |
|
||||||
'bars-outlined', |
|
||||||
'behance-circle-filled', |
|
||||||
'behance-outlined', |
|
||||||
'behance-square-filled', |
|
||||||
'behance-square-outlined', |
|
||||||
'bell-filled', |
|
||||||
'bell-outlined', |
|
||||||
'bell-twotone', |
|
||||||
'bg-colors-outlined', |
|
||||||
'block-outlined', |
|
||||||
'bold-outlined', |
|
||||||
'book-filled', |
|
||||||
'book-outlined', |
|
||||||
'book-twotone', |
|
||||||
'border-bottom-outlined', |
|
||||||
'border-horizontal-outlined', |
|
||||||
'border-inner-outlined', |
|
||||||
'border-left-outlined', |
|
||||||
'border-outer-outlined', |
|
||||||
'border-outlined', |
|
||||||
'border-right-outlined', |
|
||||||
'border-top-outlined', |
|
||||||
'border-verticle-outlined', |
|
||||||
'borderless-table-outlined', |
|
||||||
'box-plot-filled', |
|
||||||
'box-plot-outlined', |
|
||||||
'box-plot-twotone', |
|
||||||
'branches-outlined', |
|
||||||
'bug-filled', |
|
||||||
'bug-outlined', |
|
||||||
'bug-twotone', |
|
||||||
'build-filled', |
|
||||||
'build-outlined', |
|
||||||
'build-twotone', |
|
||||||
'bulb-filled', |
|
||||||
'bulb-outlined', |
|
||||||
'bulb-twotone', |
|
||||||
'calculator-filled', |
|
||||||
'calculator-outlined', |
|
||||||
'calculator-twotone', |
|
||||||
'calendar-filled', |
|
||||||
'calendar-outlined', |
|
||||||
'calendar-twotone', |
|
||||||
'camera-filled', |
|
||||||
'camera-outlined', |
|
||||||
'camera-twotone', |
|
||||||
'car-filled', |
|
||||||
'car-outlined', |
|
||||||
'car-twotone', |
|
||||||
'caret-down-filled', |
|
||||||
'caret-down-outlined', |
|
||||||
'caret-left-filled', |
|
||||||
'caret-left-outlined', |
|
||||||
'caret-right-filled', |
|
||||||
'caret-right-outlined', |
|
||||||
'caret-up-filled', |
|
||||||
'caret-up-outlined', |
|
||||||
'carry-out-filled', |
|
||||||
'carry-out-outlined', |
|
||||||
'carry-out-twotone', |
|
||||||
'check-circle-filled', |
|
||||||
'check-circle-outlined', |
|
||||||
'check-circle-twotone', |
|
||||||
'check-outlined', |
|
||||||
'check-square-filled', |
|
||||||
'check-square-outlined', |
|
||||||
'check-square-twotone', |
|
||||||
'chrome-filled', |
|
||||||
'chrome-outlined', |
|
||||||
'ci-circle-filled', |
|
||||||
'ci-circle-outlined', |
|
||||||
'ci-circle-twotone', |
|
||||||
'ci-outlined', |
|
||||||
'ci-twotone', |
|
||||||
'clear-outlined', |
|
||||||
'clock-circle-filled', |
|
||||||
'clock-circle-outlined', |
|
||||||
'clock-circle-twotone', |
|
||||||
'close-circle-filled', |
|
||||||
'close-circle-outlined', |
|
||||||
'close-circle-twotone', |
|
||||||
'close-outlined', |
|
||||||
'close-square-filled', |
|
||||||
'close-square-outlined', |
|
||||||
'close-square-twotone', |
|
||||||
'cloud-download-outlined', |
|
||||||
'cloud-filled', |
|
||||||
'cloud-outlined', |
|
||||||
'cloud-server-outlined', |
|
||||||
'cloud-sync-outlined', |
|
||||||
'cloud-twotone', |
|
||||||
'cloud-upload-outlined', |
|
||||||
'cluster-outlined', |
|
||||||
'code-filled', |
|
||||||
'code-outlined', |
|
||||||
'code-sandbox-circle-filled', |
|
||||||
'code-sandbox-outlined', |
|
||||||
'code-sandbox-square-filled', |
|
||||||
'code-twotone', |
|
||||||
'codepen-circle-filled', |
|
||||||
'codepen-circle-outlined', |
|
||||||
'codepen-outlined', |
|
||||||
'codepen-square-filled', |
|
||||||
'coffee-outlined', |
|
||||||
'column-height-outlined', |
|
||||||
'column-width-outlined', |
|
||||||
'comment-outlined', |
|
||||||
'compass-filled', |
|
||||||
'compass-outlined', |
|
||||||
'compass-twotone', |
|
||||||
'compress-outlined', |
|
||||||
'console-sql-outlined', |
|
||||||
'contacts-filled', |
|
||||||
'contacts-outlined', |
|
||||||
'contacts-twotone', |
|
||||||
'container-filled', |
|
||||||
'container-outlined', |
|
||||||
'container-twotone', |
|
||||||
'control-filled', |
|
||||||
'control-outlined', |
|
||||||
'control-twotone', |
|
||||||
'copy-filled', |
|
||||||
'copy-outlined', |
|
||||||
'copy-twotone', |
|
||||||
'copyright-circle-filled', |
|
||||||
'copyright-circle-outlined', |
|
||||||
'copyright-circle-twotone', |
|
||||||
'copyright-outlined', |
|
||||||
'copyright-twotone', |
|
||||||
'credit-card-filled', |
|
||||||
'credit-card-outlined', |
|
||||||
'credit-card-twotone', |
|
||||||
'crown-filled', |
|
||||||
'crown-outlined', |
|
||||||
'crown-twotone', |
|
||||||
'customer-service-filled', |
|
||||||
'customer-service-outlined', |
|
||||||
'customer-service-twotone', |
|
||||||
'dash-outlined', |
|
||||||
'dashboard-filled', |
|
||||||
'dashboard-outlined', |
|
||||||
'dashboard-twotone', |
|
||||||
'database-filled', |
|
||||||
'database-outlined', |
|
||||||
'database-twotone', |
|
||||||
'delete-column-outlined', |
|
||||||
'delete-filled', |
|
||||||
'delete-outlined', |
|
||||||
'delete-row-outlined', |
|
||||||
'delete-twotone', |
|
||||||
'delivered-procedure-outlined', |
|
||||||
'deployment-unit-outlined', |
|
||||||
'desktop-outlined', |
|
||||||
'diff-filled', |
|
||||||
'diff-outlined', |
|
||||||
'diff-twotone', |
|
||||||
'dingding-outlined', |
|
||||||
'dingtalk-circle-filled', |
|
||||||
'dingtalk-outlined', |
|
||||||
'dingtalk-square-filled', |
|
||||||
'disconnect-outlined', |
|
||||||
'dislike-filled', |
|
||||||
'dislike-outlined', |
|
||||||
'dislike-twotone', |
|
||||||
'dollar-circle-filled', |
|
||||||
'dollar-circle-outlined', |
|
||||||
'dollar-circle-twotone', |
|
||||||
'dollar-outlined', |
|
||||||
'dollar-twotone', |
|
||||||
'dot-chart-outlined', |
|
||||||
'double-left-outlined', |
|
||||||
'double-right-outlined', |
|
||||||
'down-circle-filled', |
|
||||||
'down-circle-outlined', |
|
||||||
'down-circle-twotone', |
|
||||||
'down-outlined', |
|
||||||
'down-square-filled', |
|
||||||
'down-square-outlined', |
|
||||||
'down-square-twotone', |
|
||||||
'download-outlined', |
|
||||||
'drag-outlined', |
|
||||||
'dribbble-circle-filled', |
|
||||||
'dribbble-outlined', |
|
||||||
'dribbble-square-filled', |
|
||||||
'dribbble-square-outlined', |
|
||||||
'dropbox-circle-filled', |
|
||||||
'dropbox-outlined', |
|
||||||
'dropbox-square-filled', |
|
||||||
'edit-filled', |
|
||||||
'edit-outlined', |
|
||||||
'edit-twotone', |
|
||||||
'ellipsis-outlined', |
|
||||||
'enter-outlined', |
|
||||||
'environment-filled', |
|
||||||
'environment-outlined', |
|
||||||
'environment-twotone', |
|
||||||
'euro-circle-filled', |
|
||||||
'euro-circle-outlined', |
|
||||||
'euro-circle-twotone', |
|
||||||
'euro-outlined', |
|
||||||
'euro-twotone', |
|
||||||
'exception-outlined', |
|
||||||
'exclamation-circle-filled', |
|
||||||
'exclamation-circle-outlined', |
|
||||||
'exclamation-circle-twotone', |
|
||||||
'exclamation-outlined', |
|
||||||
'expand-alt-outlined', |
|
||||||
'expand-outlined', |
|
||||||
'experiment-filled', |
|
||||||
'experiment-outlined', |
|
||||||
'experiment-twotone', |
|
||||||
'export-outlined', |
|
||||||
'eye-filled', |
|
||||||
'eye-invisible-filled', |
|
||||||
'eye-invisible-outlined', |
|
||||||
'eye-invisible-twotone', |
|
||||||
'eye-outlined', |
|
||||||
'eye-twotone', |
|
||||||
'facebook-filled', |
|
||||||
'facebook-outlined', |
|
||||||
'fall-outlined', |
|
||||||
'fast-backward-filled', |
|
||||||
'fast-backward-outlined', |
|
||||||
'fast-forward-filled', |
|
||||||
'fast-forward-outlined', |
|
||||||
'field-binary-outlined', |
|
||||||
'field-number-outlined', |
|
||||||
'field-string-outlined', |
|
||||||
'field-time-outlined', |
|
||||||
'file-add-filled', |
|
||||||
'file-add-outlined', |
|
||||||
'file-add-twotone', |
|
||||||
'file-done-outlined', |
|
||||||
'file-excel-filled', |
|
||||||
'file-excel-outlined', |
|
||||||
'file-excel-twotone', |
|
||||||
'file-exclamation-filled', |
|
||||||
'file-exclamation-outlined', |
|
||||||
'file-exclamation-twotone', |
|
||||||
'file-filled', |
|
||||||
'file-gif-outlined', |
|
||||||
'file-image-filled', |
|
||||||
'file-image-outlined', |
|
||||||
'file-image-twotone', |
|
||||||
'file-jpg-outlined', |
|
||||||
'file-markdown-filled', |
|
||||||
'file-markdown-outlined', |
|
||||||
'file-markdown-twotone', |
|
||||||
'file-outlined', |
|
||||||
'file-pdf-filled', |
|
||||||
'file-pdf-outlined', |
|
||||||
'file-pdf-twotone', |
|
||||||
'file-ppt-filled', |
|
||||||
'file-ppt-outlined', |
|
||||||
'file-ppt-twotone', |
|
||||||
'file-protect-outlined', |
|
||||||
'file-search-outlined', |
|
||||||
'file-sync-outlined', |
|
||||||
'file-text-filled', |
|
||||||
'file-text-outlined', |
|
||||||
'file-text-twotone', |
|
||||||
'file-twotone', |
|
||||||
'file-unknown-filled', |
|
||||||
'file-unknown-outlined', |
|
||||||
'file-unknown-twotone', |
|
||||||
'file-word-filled', |
|
||||||
'file-word-outlined', |
|
||||||
'file-word-twotone', |
|
||||||
'file-zip-filled', |
|
||||||
'file-zip-outlined', |
|
||||||
'file-zip-twotone', |
|
||||||
'filter-filled', |
|
||||||
'filter-outlined', |
|
||||||
'filter-twotone', |
|
||||||
'fire-filled', |
|
||||||
'fire-outlined', |
|
||||||
'fire-twotone', |
|
||||||
'flag-filled', |
|
||||||
'flag-outlined', |
|
||||||
'flag-twotone', |
|
||||||
'folder-add-filled', |
|
||||||
'folder-add-outlined', |
|
||||||
'folder-add-twotone', |
|
||||||
'folder-filled', |
|
||||||
'folder-open-filled', |
|
||||||
'folder-open-outlined', |
|
||||||
'folder-open-twotone', |
|
||||||
'folder-outlined', |
|
||||||
'folder-twotone', |
|
||||||
'folder-view-outlined', |
|
||||||
'font-colors-outlined', |
|
||||||
'font-size-outlined', |
|
||||||
'fork-outlined', |
|
||||||
'form-outlined', |
|
||||||
'format-painter-filled', |
|
||||||
'format-painter-outlined', |
|
||||||
'forward-filled', |
|
||||||
'forward-outlined', |
|
||||||
'frown-filled', |
|
||||||
'frown-outlined', |
|
||||||
'frown-twotone', |
|
||||||
'fullscreen-exit-outlined', |
|
||||||
'fullscreen-outlined', |
|
||||||
'function-outlined', |
|
||||||
'fund-filled', |
|
||||||
'fund-outlined', |
|
||||||
'fund-projection-screen-outlined', |
|
||||||
'fund-twotone', |
|
||||||
'fund-view-outlined', |
|
||||||
'funnel-plot-filled', |
|
||||||
'funnel-plot-outlined', |
|
||||||
'funnel-plot-twotone', |
|
||||||
'gateway-outlined', |
|
||||||
'gif-outlined', |
|
||||||
'gift-filled', |
|
||||||
'gift-outlined', |
|
||||||
'gift-twotone', |
|
||||||
'github-filled', |
|
||||||
'github-outlined', |
|
||||||
'gitlab-filled', |
|
||||||
'gitlab-outlined', |
|
||||||
'global-outlined', |
|
||||||
'gold-filled', |
|
||||||
'gold-outlined', |
|
||||||
'gold-twotone', |
|
||||||
'golden-filled', |
|
||||||
'google-circle-filled', |
|
||||||
'google-outlined', |
|
||||||
'google-plus-circle-filled', |
|
||||||
'google-plus-outlined', |
|
||||||
'google-plus-square-filled', |
|
||||||
'google-square-filled', |
|
||||||
'group-outlined', |
|
||||||
'hdd-filled', |
|
||||||
'hdd-outlined', |
|
||||||
'hdd-twotone', |
|
||||||
'heart-filled', |
|
||||||
'heart-outlined', |
|
||||||
'heart-twotone', |
|
||||||
'heat-map-outlined', |
|
||||||
'highlight-filled', |
|
||||||
'highlight-outlined', |
|
||||||
'highlight-twotone', |
|
||||||
'history-outlined', |
|
||||||
'home-filled', |
|
||||||
'home-outlined', |
|
||||||
'home-twotone', |
|
||||||
'hourglass-filled', |
|
||||||
'hourglass-outlined', |
|
||||||
'hourglass-twotone', |
|
||||||
'html5-filled', |
|
||||||
'html5-outlined', |
|
||||||
'html5-twotone', |
|
||||||
'idcard-filled', |
|
||||||
'idcard-outlined', |
|
||||||
'idcard-twotone', |
|
||||||
'ie-circle-filled', |
|
||||||
'ie-outlined', |
|
||||||
'ie-square-filled', |
|
||||||
'import-outlined', |
|
||||||
'inbox-outlined', |
|
||||||
'info-circle-filled', |
|
||||||
'info-circle-outlined', |
|
||||||
'info-circle-twotone', |
|
||||||
'info-outlined', |
|
||||||
'insert-row-above-outlined', |
|
||||||
'insert-row-below-outlined', |
|
||||||
'insert-row-left-outlined', |
|
||||||
'insert-row-right-outlined', |
|
||||||
'instagram-filled', |
|
||||||
'instagram-outlined', |
|
||||||
'insurance-filled', |
|
||||||
'insurance-outlined', |
|
||||||
'insurance-twotone', |
|
||||||
'interaction-filled', |
|
||||||
'interaction-outlined', |
|
||||||
'interaction-twotone', |
|
||||||
'issues-close-outlined', |
|
||||||
'italic-outlined', |
|
||||||
'key-outlined', |
|
||||||
'laptop-outlined', |
|
||||||
'layout-filled', |
|
||||||
'layout-outlined', |
|
||||||
'layout-twotone', |
|
||||||
'left-circle-filled', |
|
||||||
'left-circle-outlined', |
|
||||||
'left-circle-twotone', |
|
||||||
'left-outlined', |
|
||||||
'left-square-filled', |
|
||||||
'left-square-outlined', |
|
||||||
'left-square-twotone', |
|
||||||
'like-filled', |
|
||||||
'like-outlined', |
|
||||||
'like-twotone', |
|
||||||
'line-chart-outlined', |
|
||||||
'line-height-outlined', |
|
||||||
'line-outlined', |
|
||||||
'link-outlined', |
|
||||||
'linkedin-filled', |
|
||||||
'linkedin-outlined', |
|
||||||
'loading-3-quarters-outlined', |
|
||||||
'loading-outlined', |
|
||||||
'lock-filled', |
|
||||||
'lock-outlined', |
|
||||||
'lock-twotone', |
|
||||||
'login-outlined', |
|
||||||
'logout-outlined', |
|
||||||
'mac-command-filled', |
|
||||||
'mac-command-outlined', |
|
||||||
'mail-filled', |
|
||||||
'mail-outlined', |
|
||||||
'mail-twotone', |
|
||||||
'man-outlined', |
|
||||||
'medicine-box-filled', |
|
||||||
'medicine-box-outlined', |
|
||||||
'medicine-box-twotone', |
|
||||||
'medium-circle-filled', |
|
||||||
'medium-outlined', |
|
||||||
'medium-square-filled', |
|
||||||
'medium-workmark-outlined', |
|
||||||
'meh-filled', |
|
||||||
'meh-outlined', |
|
||||||
'meh-twotone', |
|
||||||
'menu-fold-outlined', |
|
||||||
'menu-outlined', |
|
||||||
'menu-unfold-outlined', |
|
||||||
'merge-cells-outlined', |
|
||||||
'message-filled', |
|
||||||
'message-outlined', |
|
||||||
'message-twotone', |
|
||||||
'minus-circle-filled', |
|
||||||
'minus-circle-outlined', |
|
||||||
'minus-circle-twotone', |
|
||||||
'minus-outlined', |
|
||||||
'minus-square-filled', |
|
||||||
'minus-square-outlined', |
|
||||||
'minus-square-twotone', |
|
||||||
'mobile-filled', |
|
||||||
'mobile-outlined', |
|
||||||
'mobile-twotone', |
|
||||||
'money-collect-filled', |
|
||||||
'money-collect-outlined', |
|
||||||
'money-collect-twotone', |
|
||||||
'monitor-outlined', |
|
||||||
'more-outlined', |
|
||||||
'node-collapse-outlined', |
|
||||||
'node-expand-outlined', |
|
||||||
'node-index-outlined', |
|
||||||
'notification-filled', |
|
||||||
'notification-outlined', |
|
||||||
'notification-twotone', |
|
||||||
'number-outlined', |
|
||||||
'one-to-one-outlined', |
|
||||||
'ordered-list-outlined', |
|
||||||
'paper-clip-outlined', |
|
||||||
'partition-outlined', |
|
||||||
'pause-circle-filled', |
|
||||||
'pause-circle-outlined', |
|
||||||
'pause-circle-twotone', |
|
||||||
'pause-outlined', |
|
||||||
'pay-circle-filled', |
|
||||||
'pay-circle-outlined', |
|
||||||
'percentage-outlined', |
|
||||||
'phone-filled', |
|
||||||
'phone-outlined', |
|
||||||
'phone-twotone', |
|
||||||
'pic-center-outlined', |
|
||||||
'pic-left-outlined', |
|
||||||
'pic-right-outlined', |
|
||||||
'picture-filled', |
|
||||||
'picture-outlined', |
|
||||||
'picture-twotone', |
|
||||||
'pie-chart-filled', |
|
||||||
'pie-chart-outlined', |
|
||||||
'pie-chart-twotone', |
|
||||||
'play-circle-filled', |
|
||||||
'play-circle-outlined', |
|
||||||
'play-circle-twotone', |
|
||||||
'play-square-filled', |
|
||||||
'play-square-outlined', |
|
||||||
'play-square-twotone', |
|
||||||
'plus-circle-filled', |
|
||||||
'plus-circle-outlined', |
|
||||||
'plus-circle-twotone', |
|
||||||
'plus-outlined', |
|
||||||
'plus-square-filled', |
|
||||||
'plus-square-outlined', |
|
||||||
'plus-square-twotone', |
|
||||||
'pound-circle-filled', |
|
||||||
'pound-circle-outlined', |
|
||||||
'pound-circle-twotone', |
|
||||||
'pound-outlined', |
|
||||||
'poweroff-outlined', |
|
||||||
'printer-filled', |
|
||||||
'printer-outlined', |
|
||||||
'printer-twotone', |
|
||||||
'profile-filled', |
|
||||||
'profile-outlined', |
|
||||||
'profile-twotone', |
|
||||||
'project-filled', |
|
||||||
'project-outlined', |
|
||||||
'project-twotone', |
|
||||||
'property-safety-filled', |
|
||||||
'property-safety-outlined', |
|
||||||
'property-safety-twotone', |
|
||||||
'pull-request-outlined', |
|
||||||
'pushpin-filled', |
|
||||||
'pushpin-outlined', |
|
||||||
'pushpin-twotone', |
|
||||||
'qq-circle-filled', |
|
||||||
'qq-outlined', |
|
||||||
'qq-square-filled', |
|
||||||
'qrcode-outlined', |
|
||||||
'question-circle-filled', |
|
||||||
'question-circle-outlined', |
|
||||||
'question-circle-twotone', |
|
||||||
'question-outlined', |
|
||||||
'radar-chart-outlined', |
|
||||||
'radius-bottomleft-outlined', |
|
||||||
'radius-bottomright-outlined', |
|
||||||
'radius-setting-outlined', |
|
||||||
'radius-upleft-outlined', |
|
||||||
'radius-upright-outlined', |
|
||||||
'read-filled', |
|
||||||
'read-outlined', |
|
||||||
'reconciliation-filled', |
|
||||||
'reconciliation-outlined', |
|
||||||
'reconciliation-twotone', |
|
||||||
'red-envelope-filled', |
|
||||||
'red-envelope-outlined', |
|
||||||
'red-envelope-twotone', |
|
||||||
'reddit-circle-filled', |
|
||||||
'reddit-outlined', |
|
||||||
'reddit-square-filled', |
|
||||||
'redo-outlined', |
|
||||||
'reload-outlined', |
|
||||||
'rest-filled', |
|
||||||
'rest-outlined', |
|
||||||
'rest-twotone', |
|
||||||
'retweet-outlined', |
|
||||||
'right-circle-filled', |
|
||||||
'right-circle-outlined', |
|
||||||
'right-circle-twotone', |
|
||||||
'right-outlined', |
|
||||||
'right-square-filled', |
|
||||||
'right-square-outlined', |
|
||||||
'right-square-twotone', |
|
||||||
'rise-outlined', |
|
||||||
'robot-filled', |
|
||||||
'robot-outlined', |
|
||||||
'rocket-filled', |
|
||||||
'rocket-outlined', |
|
||||||
'rocket-twotone', |
|
||||||
'rollback-outlined', |
|
||||||
'rotate-left-outlined', |
|
||||||
'rotate-right-outlined', |
|
||||||
'safety-certificate-filled', |
|
||||||
'safety-certificate-outlined', |
|
||||||
'safety-certificate-twotone', |
|
||||||
'safety-outlined', |
|
||||||
'save-filled', |
|
||||||
'save-outlined', |
|
||||||
'save-twotone', |
|
||||||
'scan-outlined', |
|
||||||
'schedule-filled', |
|
||||||
'schedule-outlined', |
|
||||||
'schedule-twotone', |
|
||||||
'scissor-outlined', |
|
||||||
'search-outlined', |
|
||||||
'security-scan-filled', |
|
||||||
'security-scan-outlined', |
|
||||||
'security-scan-twotone', |
|
||||||
'select-outlined', |
|
||||||
'send-outlined', |
|
||||||
'setting-filled', |
|
||||||
'setting-outlined', |
|
||||||
'setting-twotone', |
|
||||||
'shake-outlined', |
|
||||||
'share-alt-outlined', |
|
||||||
'shop-filled', |
|
||||||
'shop-outlined', |
|
||||||
'shop-twotone', |
|
||||||
'shopping-cart-outlined', |
|
||||||
'shopping-filled', |
|
||||||
'shopping-outlined', |
|
||||||
'shopping-twotone', |
|
||||||
'shrink-outlined', |
|
||||||
'signal-filled', |
|
||||||
'sisternode-outlined', |
|
||||||
'sketch-circle-filled', |
|
||||||
'sketch-outlined', |
|
||||||
'sketch-square-filled', |
|
||||||
'skin-filled', |
|
||||||
'skin-outlined', |
|
||||||
'skin-twotone', |
|
||||||
'skype-filled', |
|
||||||
'skype-outlined', |
|
||||||
'slack-circle-filled', |
|
||||||
'slack-outlined', |
|
||||||
'slack-square-filled', |
|
||||||
'slack-square-outlined', |
|
||||||
'sliders-filled', |
|
||||||
'sliders-outlined', |
|
||||||
'sliders-twotone', |
|
||||||
'small-dash-outlined', |
|
||||||
'smile-filled', |
|
||||||
'smile-outlined', |
|
||||||
'smile-twotone', |
|
||||||
'snippets-filled', |
|
||||||
'snippets-outlined', |
|
||||||
'snippets-twotone', |
|
||||||
'solution-outlined', |
|
||||||
'sort-ascending-outlined', |
|
||||||
'sort-descending-outlined', |
|
||||||
'sound-filled', |
|
||||||
'sound-outlined', |
|
||||||
'sound-twotone', |
|
||||||
'split-cells-outlined', |
|
||||||
'star-filled', |
|
||||||
'star-outlined', |
|
||||||
'star-twotone', |
|
||||||
'step-backward-filled', |
|
||||||
'step-backward-outlined', |
|
||||||
'step-forward-filled', |
|
||||||
'step-forward-outlined', |
|
||||||
'stock-outlined', |
|
||||||
'stop-filled', |
|
||||||
'stop-outlined', |
|
||||||
'stop-twotone', |
|
||||||
'strikethrough-outlined', |
|
||||||
'subnode-outlined', |
|
||||||
'swap-left-outlined', |
|
||||||
'swap-outlined', |
|
||||||
'swap-right-outlined', |
|
||||||
'switcher-filled', |
|
||||||
'switcher-outlined', |
|
||||||
'switcher-twotone', |
|
||||||
'sync-outlined', |
|
||||||
'table-outlined', |
|
||||||
'tablet-filled', |
|
||||||
'tablet-outlined', |
|
||||||
'tablet-twotone', |
|
||||||
'tag-filled', |
|
||||||
'tag-outlined', |
|
||||||
'tag-twotone', |
|
||||||
'tags-filled', |
|
||||||
'tags-outlined', |
|
||||||
'tags-twotone', |
|
||||||
'taobao-circle-filled', |
|
||||||
'taobao-circle-outlined', |
|
||||||
'taobao-outlined', |
|
||||||
'taobao-square-filled', |
|
||||||
'team-outlined', |
|
||||||
'thunderbolt-filled', |
|
||||||
'thunderbolt-outlined', |
|
||||||
'thunderbolt-twotone', |
|
||||||
'to-top-outlined', |
|
||||||
'tool-filled', |
|
||||||
'tool-outlined', |
|
||||||
'tool-twotone', |
|
||||||
'trademark-circle-filled', |
|
||||||
'trademark-circle-outlined', |
|
||||||
'trademark-circle-twotone', |
|
||||||
'trademark-outlined', |
|
||||||
'transaction-outlined', |
|
||||||
'translation-outlined', |
|
||||||
'trophy-filled', |
|
||||||
'trophy-outlined', |
|
||||||
'trophy-twotone', |
|
||||||
'twitter-circle-filled', |
|
||||||
'twitter-outlined', |
|
||||||
'twitter-square-filled', |
|
||||||
'underline-outlined', |
|
||||||
'undo-outlined', |
|
||||||
'ungroup-outlined', |
|
||||||
'unlock-filled', |
|
||||||
'unlock-outlined', |
|
||||||
'unlock-twotone', |
|
||||||
'unordered-list-outlined', |
|
||||||
'up-circle-filled', |
|
||||||
'up-circle-outlined', |
|
||||||
'up-circle-twotone', |
|
||||||
'up-outlined', |
|
||||||
'up-square-filled', |
|
||||||
'up-square-outlined', |
|
||||||
'up-square-twotone', |
|
||||||
'upload-outlined', |
|
||||||
'usb-filled', |
|
||||||
'usb-outlined', |
|
||||||
'usb-twotone', |
|
||||||
'user-add-outlined', |
|
||||||
'user-delete-outlined', |
|
||||||
'user-outlined', |
|
||||||
'user-switch-outlined', |
|
||||||
'usergroup-add-outlined', |
|
||||||
'usergroup-delete-outlined', |
|
||||||
'verified-outlined', |
|
||||||
'vertical-align-bottom-outlined', |
|
||||||
'vertical-align-middle-outlined', |
|
||||||
'vertical-align-top-outlined', |
|
||||||
'vertical-left-outlined', |
|
||||||
'vertical-right-outlined', |
|
||||||
'video-camera-add-outlined', |
|
||||||
'video-camera-filled', |
|
||||||
'video-camera-outlined', |
|
||||||
'video-camera-twotone', |
|
||||||
'wallet-filled', |
|
||||||
'wallet-outlined', |
|
||||||
'wallet-twotone', |
|
||||||
'warning-filled', |
|
||||||
'warning-outlined', |
|
||||||
'warning-twotone', |
|
||||||
'wechat-filled', |
|
||||||
'wechat-outlined', |
|
||||||
'weibo-circle-filled', |
|
||||||
'weibo-circle-outlined', |
|
||||||
'weibo-outlined', |
|
||||||
'weibo-square-filled', |
|
||||||
'weibo-square-outlined', |
|
||||||
'whats-app-outlined', |
|
||||||
'wifi-outlined', |
|
||||||
'windows-filled', |
|
||||||
'windows-outlined', |
|
||||||
'woman-outlined', |
|
||||||
'yahoo-filled', |
|
||||||
'yahoo-outlined', |
|
||||||
'youtube-filled', |
|
||||||
'youtube-outlined', |
|
||||||
'yuque-filled', |
|
||||||
'yuque-outlined', |
|
||||||
'zhihu-circle-filled', |
|
||||||
'zhihu-outlined', |
|
||||||
'zhihu-square-filled', |
|
||||||
'zoom-in-outlined', |
|
||||||
'zoom-out-outlined', |
|
||||||
], |
|
||||||
} |
|
||||||
@ -1,7 +1,4 @@ |
|||||||
import Icon from './src/Icon.vue' |
|
||||||
import SvgIcon from './src/SvgIcon.vue' |
import SvgIcon from './src/SvgIcon.vue' |
||||||
import IconPicker from './src/IconPicker.vue' |
import IconPicker from './src/IconPicker.vue' |
||||||
|
|
||||||
export { Icon, IconPicker, SvgIcon } |
export { IconPicker, SvgIcon } |
||||||
|
|
||||||
export default Icon |
|
||||||
|
|||||||
@ -1,102 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import type { CSSProperties } from 'vue' |
|
||||||
import { computed, nextTick, onMounted, ref, unref, watch } from 'vue' |
|
||||||
import Iconify from '@iconify/iconify' |
|
||||||
import SvgIcon from './SvgIcon.vue' |
|
||||||
import { isString } from '@/utils/is' |
|
||||||
import { propTypes } from '@/utils/propTypes' |
|
||||||
|
|
||||||
defineOptions({ name: 'Icon' }) |
|
||||||
|
|
||||||
const props = defineProps({ |
|
||||||
// icon name |
|
||||||
icon: propTypes.string, |
|
||||||
// icon color |
|
||||||
color: propTypes.string, |
|
||||||
// icon size |
|
||||||
size: { |
|
||||||
type: [String, Number] as PropType<string | number>, |
|
||||||
default: 16, |
|
||||||
}, |
|
||||||
spin: propTypes.bool.def(false), |
|
||||||
prefix: propTypes.string.def(''), |
|
||||||
}) |
|
||||||
|
|
||||||
const SVG_END_WITH_FLAG = '|svg' |
|
||||||
|
|
||||||
const elRef = ref<ElRef>(null) |
|
||||||
|
|
||||||
const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG)) |
|
||||||
const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, '')) |
|
||||||
const getIconRef = computed(() => `${props.prefix ? `${props.prefix}:` : ''}${props.icon}`) |
|
||||||
|
|
||||||
async function update() { |
|
||||||
if (unref(isSvgIcon)) |
|
||||||
return |
|
||||||
|
|
||||||
const el = unref(elRef) |
|
||||||
if (!el) |
|
||||||
return |
|
||||||
|
|
||||||
await nextTick() |
|
||||||
const icon = unref(getIconRef) |
|
||||||
if (!icon) |
|
||||||
return |
|
||||||
|
|
||||||
const svg = Iconify.renderSVG(icon, {}) |
|
||||||
if (svg) { |
|
||||||
el.textContent = '' |
|
||||||
el.appendChild(svg) |
|
||||||
} |
|
||||||
else { |
|
||||||
const span = document.createElement('span') |
|
||||||
span.className = 'iconify' |
|
||||||
span.dataset.icon = icon |
|
||||||
el.textContent = '' |
|
||||||
el.appendChild(span) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getWrapStyle = computed((): CSSProperties => { |
|
||||||
const { size, color } = props |
|
||||||
let fs = size |
|
||||||
if (isString(size)) |
|
||||||
fs = Number.parseInt(size, 10) |
|
||||||
|
|
||||||
return { |
|
||||||
fontSize: `${fs}px`, |
|
||||||
color, |
|
||||||
display: 'inline-flex', |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
watch(() => props.icon, update, { flush: 'post' }) |
|
||||||
|
|
||||||
onMounted(update) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<SvgIcon v-if="isSvgIcon" :size="size" :name="getSvgIcon" class="anticon" :class="[$attrs.class]" :spin="spin" /> |
|
||||||
<span v-else ref="elRef" class="anticon app-iconify" :class="[$attrs.class, spin && 'app-iconify-spin']" :style="getWrapStyle" /> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style lang="less"> |
|
||||||
.app-iconify { |
|
||||||
display: inline-block; |
|
||||||
// vertical-align: middle; |
|
||||||
|
|
||||||
&-spin { |
|
||||||
svg { |
|
||||||
animation: loadingCircle 1s infinite linear; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
span.iconify { |
|
||||||
display: block; |
|
||||||
min-width: 1em; |
|
||||||
min-height: 1em; |
|
||||||
background-color: @iconify-bg-color; |
|
||||||
border-radius: 100%; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,8 @@ |
|||||||
|
import antDesignIconsJson from '@iconify/json/json/ant-design.json' |
||||||
|
|
||||||
|
/** |
||||||
|
* Get global icons, defaulting to ant-design. |
||||||
|
*/ |
||||||
|
export function getIcons() { |
||||||
|
return Object.keys(antDesignIconsJson.icons).map(item => `i-${antDesignIconsJson.prefix}:${item}`) |
||||||
|
} |
||||||
@ -1,13 +1,24 @@ |
|||||||
import { defineConfig, presetTypography, presetUno } from 'unocss' |
import { defineConfig, presetIcons, presetTypography, presetUno } from 'unocss' |
||||||
|
import { getIcons } from './src/components/Icon/src/icons' |
||||||
|
|
||||||
export default defineConfig({ |
export default defineConfig({ |
||||||
presets: [ |
presets: [ |
||||||
presetUno(), |
presetUno(), |
||||||
presetTypography(), |
presetTypography(), |
||||||
|
presetIcons({ |
||||||
|
extraProperties: { |
||||||
|
'font-size': '16px', |
||||||
|
'display': 'inline-block', |
||||||
|
'vertical-align': 'middle', |
||||||
|
}, |
||||||
|
}), |
||||||
], |
], |
||||||
theme: { |
theme: { |
||||||
colors: { |
colors: { |
||||||
primary: '#0960bd', |
primary: '#0960bd', |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
|
safelist: [ |
||||||
|
...getIcons(), |
||||||
|
], |
||||||
}) |
}) |
||||||
|
|||||||
Reference in new issue