feat: ms-icon组件,集成了设计稿的iconfont字体图标

This commit is contained in:
baiqi 2023-07-13 15:49:24 +08:00 committed by 刘瑞斌
parent dd24f15713
commit 21e36a1639
9 changed files with 3144 additions and 1 deletions

View File

@ -2,4 +2,5 @@
/src/**/*.json /src/**/*.json
dist dist
postcss.config.js postcss.config.js
*.md *.md
/src/assets/icon-font

View File

@ -0,0 +1,765 @@
@font-face {
font-family: iconfont; /* Project id 3462279 */
src: url('iconfont.woff2?t=1689072910653') format('woff2'), url('iconfont.woff?t=1689072910653') format('woff'),
url('iconfont.ttf?t=1689072910653') format('truetype'), url('iconfont.svg?t=1689072910653#iconfont') format('svg');
}
.iconfont {
font-size: 16px;
font-family: iconfont !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon_folder_collapse::before {
content: '\e667';
}
.icon-icon_drawer::before {
content: '\e668';
}
.icon-icon_version::before {
content: '\e666';
}
.icon-icon_carriage_return::before {
content: '\e662';
}
.icon-icon_corner_right_up::before {
content: '\e663';
}
.icon-icon_api::before {
content: '\e664';
}
.icon-icon_defect::before {
content: '\e665';
}
.icon-icon_disable::before {
content: '\e661';
}
.icon-icon_restarting::before {
content: '\e65f';
}
.icon-icon_file-unknow_colorful1::before {
content: '\e660';
}
.icon-a-icon_file-compressed_colorful_ash2::before {
content: '\e63f';
}
.icon-a-icon_file-compressed_colorful2::before {
content: '\e640';
}
.icon-icon_file-image_colorful_ash::before {
content: '\e642';
}
.icon-icon_file-ppt_colorful_ash::before {
content: '\e643';
}
.icon-icon_file-pdf_colorful_ash::before {
content: '\e644';
}
.icon-a-icon_file-compressed_colorful1::before {
content: '\e645';
}
.icon-icon_file-image_colorful1::before {
content: '\e646';
}
.icon-icon_file-word_colorful_ash::before {
content: '\e647';
}
.icon-icon_file-sketch_colorful1::before {
content: '\e648';
}
.icon-icon_file-ppt_colorful1::before {
content: '\e649';
}
.icon-icon_file-excel_colorful_ash::before {
content: '\e64a';
}
.icon-icon_file-vedio_colorful_ash::before {
content: '\e64b';
}
.icon-icon_file-excel_colorful1::before {
content: '\e64c';
}
.icon-icon_file-pdf_colorful1::before {
content: '\e64d';
}
.icon-icon_file-vedio_colorful1::before {
content: '\e64e';
}
.icon-icon_file-CSV_colorful_ash::before {
content: '\e64f';
}
.icon-icon_file-sketch_colorful_ash::before {
content: '\e650';
}
.icon-icon_file-CSV_colorful1::before {
content: '\e651';
}
.icon-icon_file-sql_colorful_ash::before {
content: '\e652';
}
.icon-icon_file-text_colorful1::before {
content: '\e653';
}
.icon-icon_file-word_colorful1::before {
content: '\e654';
}
.icon-icon_file-xmind_colorful1::before {
content: '\e655';
}
.icon-icon_file-sql_colorful1::before {
content: '\e656';
}
.icon-icon_file-text_colorful_ash::before {
content: '\e657';
}
.icon-icon_file-xmind_colorful_ash::before {
content: '\e658';
}
.icon-icon_add::before {
content: '\e63a';
}
.icon-icon_alarm_clock::before {
content: '\e63b';
}
.icon-icon_drag::before {
content: '\e63c';
}
.icon-icon_statistical_report_linear::before {
content: '\e63d';
}
.icon-icon_reduce::before {
content: '\e63e';
}
.icon-icon_folder_expansion::before {
content: '\e633';
}
.icon-icon_functional_testing::before {
content: '\e630';
}
.icon-icon_full_screen_one::before {
content: '\e631';
}
.icon-icon_folder::before {
content: '\e632';
}
.icon-icon_reexamination_linear::before {
content: '\e62f';
}
.icon-icon_reexamination_planarity::before {
content: '\e62b';
}
.icon-icon_preview_close_one::before {
content: '\e62c';
}
.icon-icon_off_screen::before {
content: '\e62d';
}
.icon-icon_guide::before {
content: '\e62e';
}
.icon-icon_skip_planarity::before {
content: '\e628';
}
.icon-icon_skip_linear::before {
content: '\e629';
}
.icon-icon_scroll_filled1::before {
content: '\e62a';
}
.icon-a-icon_system_settings::before {
content: '\e626';
}
.icon-icon_statistical_report_planarity::before {
content: '\e627';
}
.icon-icon_translation::before {
content: '\e623';
}
.icon-icon_testing::before {
content: '\e624';
}
.icon-icon_create_planarity::before {
content: '\e620';
}
.icon-icon_binding::before {
content: '\e621';
}
.icon-icon_wait::before {
content: '\e622';
}
.icon-icon_text-box_filled::before {
content: '\e722';
}
.icon-icon_code_outlined::before {
content: '\e723';
}
.icon-icon_invisible_outlined::before {
content: '\e724';
}
.icon-icon_ecs_outlined::before {
content: '\e721';
}
.icon-icon_block_outlined::before {
content: '\e711';
}
.icon-icon_home_filled::before {
content: '\e712';
}
.icon-icon_bill_outlined::before {
content: '\e713';
}
.icon-icon_host_outlined::before {
content: '\e714';
}
.icon-icon_home_outlined::before {
content: '\e715';
}
.icon-icon_host_filled::before {
content: '\e716';
}
.icon-icon_cloud_outlined::before {
content: '\e717';
}
.icon-icon_member_outlined::before {
content: '\e718';
}
.icon-icon_member-add_outlined::before {
content: '\e719';
}
.icon-icon_not-started_outlined::before {
content: '\e71a';
}
.icon-icon_skip_outlined::before {
content: '\e71b';
}
.icon-icon_operation-analysis_outlined::before {
content: '\e71c';
}
.icon-icon_plan-test-filled::before {
content: '\e71d';
}
.icon-icon_shield_outlined::before {
content: '\e71e';
}
.icon-icon_cloud-storage_outlined::before {
content: '\e71f';
}
.icon-icon_storage_filled::before {
content: '\e720';
}
.icon-icon_pie_filled1::before {
content: '\e70d';
}
.icon-icon_performance-test-filled::before {
content: '\e70e';
}
.icon-icon_api-test-filled::before {
content: '\e70f';
}
.icon-icon_ui-test-filled::before {
content: '\e710';
}
.icon-a-icon_file-compressed_colorful::before {
content: '\e70c';
}
.icon-icon_uploadfile2_colorful::before {
content: '\e703';
}
.icon-icon_file-jtl_colorful::before {
content: '\e704';
}
.icon-icon_file-unknow_colorful::before {
content: '\e705';
}
.icon-icon_file-jmx_colorful::before {
content: '\e706';
}
.icon-icon_file-sql_colorful::before {
content: '\e707';
}
.icon-icon_file-gz_colorful::before {
content: '\e708';
}
.icon-icon_file-jar_colorful::before {
content: '\e709';
}
.icon-icon_file-zip_colorful::before {
content: '\e70a';
}
.icon-icon_file-CSV_colorful::before {
content: '\e70b';
}
.icon-icon_file-excel_colorful::before {
content: '\e6f9';
}
.icon-icon_file-text_colorful::before {
content: '\e6fb';
}
.icon-icon_file-xmind_colorful::before {
content: '\e6fc';
}
.icon-icon_file-ppt_colorful::before {
content: '\e6fd';
}
.icon-icon_file-vedio_colorful::before {
content: '\e6fe';
}
.icon-icon_file-image_colorful::before {
content: '\e6ff';
}
.icon-icon_file-word_colorful::before {
content: '\e700';
}
.icon-icon_file-pdf_colorful::before {
content: '\e701';
}
.icon-icon_file-sketch_colorful::before {
content: '\e702';
}
.icon-icon_block_filled::before {
content: '\e6eb';
}
.icon-icon_not-started_filled::before {
content: '\e6f4';
}
.icon-icon_skip_filled::before {
content: '\e6f8';
}
.icon-icon_divider_outlined::before {
content: '\e6fa';
}
.icon-icon_pc_filled::before {
content: '\e6ea';
}
.icon-icon_approval_outlined::before {
content: '\e6ec';
}
.icon-icon_delete-trash_filled::before {
content: '\e6ed';
}
.icon-icon_pie_filled::before {
content: '\e6ee';
}
.icon-icon_resubmit_filled::before {
content: '\e6ef';
}
.icon-icon_switch_outlined1::before {
content: '\e6f0';
}
.icon-icon_test-tracking_filled::before {
content: '\e6f1';
}
.icon-icon_add-comment_outlined::before {
content: '\e6f2';
}
.icon-icon_sort_outlined2::before {
content: '\e6f3';
}
.icon-icon_setting_filled::before {
content: '\e6f5';
}
.icon-icon_project-settings-filled::before {
content: '\e6f6';
}
.icon-icon_contrast_outlined::before {
content: '\e6f7';
}
.icon-icon_left_outlined::before {
content: '\e6e5';
}
.icon-icon_folder_filled::before {
content: '\e6e6';
}
.icon-icon_drive_filled::before {
content: '\e6e7';
}
.icon-icon_db::before {
content: '\e6e8';
}
.icon-icon_Invalid_colorful::before {
content: '\e6e9';
}
.icon-icon_sql_outlined::before {
content: '\e6e2';
}
.icon-icon_sql::before {
content: '\e6e4';
}
.icon-icon_database::before {
content: '\e6e3';
}
.icon-icon_api_outlined::before {
content: '\e6e1';
}
.icon-icon_dashboard_outlined::before {
content: '\e6db';
}
.icon-icon_excel_outlined::before {
content: '\e6dd';
}
.icon-icon_link-record_outlined1::before {
content: '\e6df';
}
.icon-icon_database_outlined::before {
content: '\e6e0';
}
.icon-icon_customize::before {
content: '\e6da';
}
.icon-icon_excel::before {
content: '\e6dc';
}
.icon-icon_link-record::before {
content: '\e6de';
}
.icon-icon_left-association::before {
content: '\e6c5';
}
.icon-icon_right-association::before {
content: '\e6d1';
}
.icon-icon_intersect::before {
content: '\e6ae';
}
.icon-icon_info_filled::before {
content: '\e685';
}
.icon-icon_close_filled::before {
content: '\e691';
}
.icon-icon_info_outlined::before {
content: '\e696';
}
.icon-icon_warning_filled::before {
content: '\e69a';
}
.icon-icon_yes_outlined::before {
content: '\e6a8';
}
.icon-icon_succeed_filled::before {
content: '\e6ba';
}
.icon-icon-maybe_outlined::before {
content: '\e6bb';
}
.icon-icon_down_outlined::before {
content: '\e68d';
}
.icon-icon_history_outlined::before {
content: '\e68e';
}
.icon-icon_attachment_outlined::before {
content: '\e68f';
}
.icon-icon_pull-left_outlined::before {
content: '\e690';
}
.icon-icon_left-alignment_outlined::before {
content: '\e692';
}
.icon-icon_drag_outlined::before {
content: '\e693';
}
.icon-icon_logs_outlined::before {
content: '\e694';
}
.icon-icon_new-item_outlined::before {
content: '\e695';
}
.icon-icon_logs_outlined-1::before {
content: '\e697';
}
.icon-icon_refresh_outlined::before {
content: '\e698';
}
.icon-icon_font-color_outlined::before {
content: '\e699';
}
.icon-icon_mindnote_outlined::before {
content: '\e69b';
}
.icon-icon_moments-categories_outlined::before {
content: '\e69c';
}
.icon-icon_doc-replace_outlined::before {
content: '\e69d';
}
.icon-icon_italic_outlined::before {
content: '\e69e';
}
.icon-icon_scroll_filled::before {
content: '\e69f';
}
.icon-icon_folder_outlined-1::before {
content: '\e6a0';
}
.icon-icon_file-link-image_outlined::before {
content: '\e6a1';
}
.icon-icon_more_outlined::before {
content: '\e6a2';
}
.icon-icon_pc_outlined::before {
content: '\e6a3';
}
.icon-icon_minify_outlined::before {
content: '\e6a4';
}
.icon-icon_text_outlined::before {
content: '\e6a5';
}
.icon-icon_stretch_outlined::before {
content: '\e6a6';
}
.icon-icon_resetpassword1::before {
content: '\e6a7';
}
.icon-icon_into-item_outlined::before {
content: '\e6a9';
}
.icon-icon_organization_outlined::before {
content: '\e6aa';
}
.icon-icon_sort_outlined1::before {
content: '\e6ab';
}
.icon-icon_share-label_filled::before {
content: '\e6ac';
}
.icon-icon_visible_outlined::before {
content: '\e6ad';
}
.icon-icon_time_outlined::before {
content: '\e6af';
}
.icon-icon_effects_outlined::before {
content: '\e6b0';
}
.icon-icon_style-set_outlined::before {
content: '\e6b1';
}
.icon-icon_redo_outlined::before {
content: '\e6b2';
}
.icon-icon_vertical-align_outlined1::before {
content: '\e6b3';
}
.icon-icon-quicksetting::before {
content: '\e6b4';
}
.icon-icon_link-record_outlined::before {
content: '\e6b5';
}
.icon-icon_template_outlined::before {
content: '\e6b6';
}
.icon-icon_notification_outlined::before {
content: '\e6b7';
}
.icon-icon_play-round_filled::before {
content: '\e6b8';
}
.icon-icon-lock::before {
content: '\e6b9';
}
.icon-icon_title-left-align_outlined::before {
content: '\e6bc';
}
.icon-icon_top-align_outlined::before {
content: '\e6bd';
}
.icon-icon_rename_outlined::before {
content: '\e6be';
}
.icon-icon_share-label_outlined::before {
content: '\e6bf';
}
.icon-icon_right-alignment_outlined::before {
content: '\e6c0';
}
.icon-icon-draft::before {
content: '\e6c1';
}
.icon-icon_search-outline_outlined::before {
content: '\e6c2';
}
.icon-icon_upload_outlined::before {
content: '\e6c3';
}
.icon-icon-contacts::before {
content: '\e6c4';
}
.icon-icon_up_outlined::before {
content: '\e6c6';
}
.icon-icon_unlink_outlined::before {
content: '\e6c7';
}
.icon-icon-alarmclock::before {
content: '\e6c8';
}
.icon-icon_number_outlined::before {
content: '\e6c9';
}
.icon-icon_up-left_outlined::before {
content: '\e6ca';
}
.icon-icon_plugin_outlined::before {
content: '\e6cb';
}
.icon-icon_switch_outlined::before {
content: '\e6cc';
}
.icon-icon_pull-right_outlined::before {
content: '\e6cd';
}
.icon-icon-laser::before {
content: '\e6ce';
}
.icon-icon-filter::before {
content: '\e6cf';
}
.icon-icon-group::before {
content: '\e6d0';
}
.icon-icon_title-top-align_outlined::before {
content: '\e6d2';
}
.icon-icon_link-copy_outlined::before {
content: '\e6d3';
}
.icon-icon_reset_outlined::before {
content: '\e6d4';
}
.icon-icon_right_outlined::before {
content: '\e6d5';
}
.icon-icon_take-action_outlined::before {
content: '\e6d6';
}
.icon-icon_view-list_outlined::before {
content: '\e6d7';
}
.icon-icon_undo_outlined::before {
content: '\e6d8';
}
.icon-icon-setting::before {
content: '\e6d9';
}
.icon-icon_bottom-align_outlined::before {
content: '\e659';
}
.icon-icon_admin_outlined::before {
content: '\e65a';
}
.icon-icon_expand-right_filled::before {
content: '\e65b';
}
.icon-icon_delete-trash_outlined::before {
content: '\e65c';
}
.icon-icon_sort_outlined::before {
content: '\e65d';
}
.icon-icon_vertical-align_outlined::before {
content: '\e65e';
}
.icon-icon_resetpassword::before {
content: '\e66b';
}
.icon-icon_arrow-left_outlined::before {
content: '\e66c';
}
.icon-icon_arrow-right_outlined::before {
content: '\e66d';
}
.icon-icon_add_outlined-1::before {
content: '\e66e';
}
.icon-icon_add-entry_outlined::before {
content: '\e66f';
}
.icon-icon_add-dictionary_outlined::before {
content: '\e670';
}
.icon-icon_add-folder_outlined::before {
content: '\e671';
}
.icon-icon_calendar_outlined::before {
content: '\e672';
}
.icon-icon_bottom-align_outlined1::before {
content: '\e673';
}
.icon-icon_clear_outlined::before {
content: '\e674';
}
.icon-icon_bold_outlined::before {
content: '\e675';
}
.icon-icon_delete-trash_outlined1::before {
content: '\e676';
}
.icon-icon_center-alignment_outlined::before {
content: '\e677';
}
.icon-icon_copy_outlined::before {
content: '\e678';
}
.icon-icon_chat-news_outlined::before {
content: '\e679';
}
.icon-icon_collection_outlined::before {
content: '\e67a';
}
.icon-icon_admin_outlined1::before {
content: '\e67b';
}
.icon-icon_form_outlined::before {
content: '\e67c';
}
.icon-icon_magnify_outlined::before {
content: '\e67d';
}
.icon-icon_close_outlined::before {
content: '\e67e';
}
.icon-icon_describe_outlined::before {
content: '\e67f';
}
.icon-icon_image_outlined::before {
content: '\e680';
}
.icon-icon_down-right_outlined::before {
content: '\e681';
}
.icon-icon_gridlines_outlined::before {
content: '\e682';
}
.icon-icon_collect_filled::before {
content: '\e683';
}
.icon-icon_expand-down_filled::before {
content: '\e684';
}
.icon-icon_add_outlined::before {
content: '\e686';
}
.icon-icon_edit_outlined::before {
content: '\e687';
}
.icon-icon_expand-right_filled1::before {
content: '\e688';
}
.icon-icon_folder_outlined::before {
content: '\e689';
}
.icon-icon_local_outlined::before {
content: '\e68a';
}
.icon-icon_card_outlined::before {
content: '\e68b';
}
.icon-icon_Batch_outlined::before {
content: '\e68c';
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 298 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,24 @@
<template>
<icon-font
:type="props.type"
:size="props.size || 14"
:class="props.color ? `text-[${props.color}]` : 'text-[var(--color-text-4)]'"
/>
</template>
<script lang="ts" setup>
import { Icon } from '@arco-design/web-vue';
import '@/assets/icon-font/iconfont';
const props = defineProps<{
type: string;
size?: string | number;
rotate?: number;
spin?: boolean;
color?: string;
}>();
const IconFont = Icon.addFromIconFontCn({
extraProps: { ...props },
});
</script>