From 5f8a545d365a5cb86f332fd0cb50cb53297a2ae4 Mon Sep 17 00:00:00 2001 From: DrowsyFlesh Date: Mon, 24 Jun 2024 08:11:14 +0800 Subject: [PATCH] add AcgHelper CatPinkIcon CatVipIcon and Bilibili icon --- previewSite/iconMap.js | 15 +++++++++++---- previewSite/main.jsx | 27 +++++++++++++++++---------- src/Icons/AcgHelper/CatPinkIcon.tsx | 12 ++++++++++++ src/Icons/AcgHelper/CatVipIcon.tsx | 12 ++++++++++++ src/Icons/Bilibili/BilibiliIcon.tsx | 12 ++++++++++++ src/Icons/Objects/MoonIcon.tsx | 2 +- src/Icons/Objects/TargetIcon.tsx | 2 +- src/Icons/index.ts | 3 +++ 8 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 src/Icons/AcgHelper/CatPinkIcon.tsx create mode 100644 src/Icons/AcgHelper/CatVipIcon.tsx create mode 100644 src/Icons/Bilibili/BilibiliIcon.tsx diff --git a/previewSite/iconMap.js b/previewSite/iconMap.js index 097510f..0c90347 100644 --- a/previewSite/iconMap.js +++ b/previewSite/iconMap.js @@ -82,7 +82,6 @@ export default [ 'CompleteVideoCardIcon' ], }, - { type: 'Design', list: [ @@ -407,9 +406,17 @@ export default [ ], }, { - type : 'Bilibili' , - list : [ - 'BigMemberIcon' + type: 'Bilibili', + list: [ + 'BigMemberIcon', + 'BilibiliIcon' + ] + }, + { + type: 'ACGHelper', + list: [ + 'CatPinkIcon', + 'CatVipIcon', ] } ]; diff --git a/previewSite/main.jsx b/previewSite/main.jsx index 2b74bfd..0e5698a 100644 --- a/previewSite/main.jsx +++ b/previewSite/main.jsx @@ -33,7 +33,7 @@ const GlobalStyle = createGlobalStyle` margin: 0; padding: 0; --icon-size: 15px; - --gap-size: 15px; + --gap-size: 30px; } * { @@ -72,6 +72,7 @@ const Wrapper = styled.div` //padding-top: 128px; display: flex; grid-template-columns: repeat(auto-fit, 100%); + margin-bottom: var(--gap-size); &.hide { display: none; @@ -87,7 +88,7 @@ const Wrapper = styled.div` .topic { position: sticky; top: 0; - margin: 0px 0px 16px; + margin: 16px 0px 16px; padding: 8px 0; text-align: center; font-size: 14px; @@ -174,10 +175,10 @@ const IconBlockWrapper = styled.div` &::after { content: ""; position: absolute; - top: calc(var(--icon-size) / -2); - left: calc(var(--icon-size) / -2); - width: calc(100% + var(--icon-size)); - height: calc(100% + var(--icon-size)); + top: calc(200% / -4); + left: calc(200% / -4); + width: calc(200%); + height: calc(200%); background-color: antiquewhite; border-radius: 2px; z-index: -1; @@ -206,6 +207,8 @@ const IconBlockWrapper = styled.div` svg { pointer-events: none; + width: calc(var(--icon-size) * (var(--sizeX) * 2 - 1)); + height: calc(var(--icon-size) * (var(--sizeY) * 2 - 1)); //transition: transform .3s; } } @@ -242,7 +245,7 @@ const IconLineWrapper = styled.div` cursor: pointer; //transition: border-color .3s; - :hover { + &:hover { background-color: antiquewhite; .icon-name { @@ -250,7 +253,7 @@ const IconLineWrapper = styled.div` } } - :active { + &:active { background-color: blanchedalmond; } @@ -266,6 +269,8 @@ const IconLineWrapper = styled.div` svg { pointer-events: none; + width: calc(var(--icon-size) * (var(--sizeX) * 2 - 1)); + height: calc(var(--icon-size) * (var(--sizeY) * 2 - 1)); //transition: transform .3s; } } @@ -355,7 +360,8 @@ export default () => { key={iconName} onClick={onClick} style={{ - '--size': 1, + '--sizeX': Math.ceil(1 / 30), + '--sizeY': Math.ceil(1 / 30), }} >
@@ -369,7 +375,8 @@ export default () => { return
diff --git a/src/Icons/AcgHelper/CatPinkIcon.tsx b/src/Icons/AcgHelper/CatPinkIcon.tsx new file mode 100644 index 0000000..44cbdb1 --- /dev/null +++ b/src/Icons/AcgHelper/CatPinkIcon.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {IconProps} from '../types'; +import * as PropTypes from 'prop-types'; + +export const CatPinkIcon = React.forwardRef( + ({color = 'currentColor', iconType = 'AcgHelper', ...props}, forwardedRef) => { + return ; + } +); +CatPinkIcon.displayName = 'CatPinkIcon'; +CatPinkIcon.propTypes = {iconType: PropTypes.string}; +CatPinkIcon.defaultProps = {iconType: 'AcgHelper'}; \ No newline at end of file diff --git a/src/Icons/AcgHelper/CatVipIcon.tsx b/src/Icons/AcgHelper/CatVipIcon.tsx new file mode 100644 index 0000000..52177a0 --- /dev/null +++ b/src/Icons/AcgHelper/CatVipIcon.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {IconProps} from '../types'; +import * as PropTypes from 'prop-types'; + +export const CatVipIcon = React.forwardRef( + ({color = 'currentColor', iconType = 'AcgHelper', ...props}, forwardedRef) => { + return ; + } +); +CatVipIcon.displayName = 'CatVipIcon'; +CatVipIcon.propTypes = {iconType: PropTypes.string}; +CatVipIcon.defaultProps = {iconType: 'AcgHelper'}; \ No newline at end of file diff --git a/src/Icons/Bilibili/BilibiliIcon.tsx b/src/Icons/Bilibili/BilibiliIcon.tsx new file mode 100644 index 0000000..f4dbcb0 --- /dev/null +++ b/src/Icons/Bilibili/BilibiliIcon.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import {IconProps} from '../types'; +import * as PropTypes from 'prop-types'; + +export const BilibiliIcon = React.forwardRef( + ({color = 'currentColor', iconType = 'Bilibili', ...props}, forwardedRef) => { + return ; + } +); +BilibiliIcon.displayName = 'BilibiliIcon'; +BilibiliIcon.propTypes = {iconType: PropTypes.string}; +BilibiliIcon.defaultProps = {iconType: 'Bilibili'}; \ No newline at end of file diff --git a/src/Icons/Objects/MoonIcon.tsx b/src/Icons/Objects/MoonIcon.tsx index 1d96a37..561b231 100644 --- a/src/Icons/Objects/MoonIcon.tsx +++ b/src/Icons/Objects/MoonIcon.tsx @@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'; export const MoonIcon = React.forwardRef( ({color = 'currentColor', iconType = 'Objects', ...props}, forwardedRef) => { - return ; + return ; } ); MoonIcon.displayName = 'MoonIcon'; diff --git a/src/Icons/Objects/TargetIcon.tsx b/src/Icons/Objects/TargetIcon.tsx index 4ae87f0..95758c2 100644 --- a/src/Icons/Objects/TargetIcon.tsx +++ b/src/Icons/Objects/TargetIcon.tsx @@ -4,7 +4,7 @@ import * as PropTypes from 'prop-types'; export const TargetIcon = React.forwardRef( ({color = 'currentColor', iconType = 'Objects', ...props}, forwardedRef) => { - return ; + return ; } ); TargetIcon.displayName = 'TargetIcon'; diff --git a/src/Icons/index.ts b/src/Icons/index.ts index da95d00..880ce21 100644 --- a/src/Icons/index.ts +++ b/src/Icons/index.ts @@ -26,6 +26,7 @@ export {BadgeIcon} from './Components/BadgeIcon'; export {BarChartIcon} from './Components/BarChartIcon'; export {BellIcon} from './Objects/BellIcon'; export {BigMemberIcon} from './Bilibili/BigMemberIcon'; +export {BilibiliIcon} from './Bilibili/BilibiliIcon'; export {BilibiliHelperLogoIcon} from './Logos/BilibiliHelperLogoIcon'; export {BilibiliMusicLogoIcon} from './Logos/BilibiliMusicLogoIcon'; export {BilibilihelperTextIcon} from './Logos/BilibilihelperTextIcon'; @@ -54,6 +55,8 @@ export {CaretRightIcon} from './Arrows/CaretRightIcon'; export {CaretSortIcon} from './Arrows/CaretSortIcon'; export {CaretUpIcon} from './Arrows/CaretUpIcon'; export {CatPawIcon} from './Objects/CatPawIcon'; +export {CatPinkIcon} from './AcgHelper/CatPinkIcon'; +export {CatVipIcon} from './AcgHelper/CatVipIcon'; export {ChatBubbleIcon} from './Objects/ChatBubbleIcon'; export {CheckIcon} from './Abstract/CheckIcon'; export {CheckCircledIcon} from './Abstract/CheckCircledIcon';