index.js
71 lines
| 1 | /** |
| 2 | * VK Icon Component |
| 3 | * |
| 4 | * Common VK icon SVG component for use in panels and toolbar buttons. |
| 5 | */ |
| 6 | import { Icon } from '@wordpress/components'; |
| 7 | import { ReactComponent as IconSVG } from './icon.svg'; |
| 8 | |
| 9 | /** |
| 10 | * Get base icon style |
| 11 | * |
| 12 | * @return {Object} Base icon style object |
| 13 | */ |
| 14 | export const getVkIconBaseStyle = () => ({ |
| 15 | width: '24px', |
| 16 | height: '24px', |
| 17 | marginLeft: '4px', |
| 18 | }); |
| 19 | |
| 20 | /** |
| 21 | * Get active icon style |
| 22 | * |
| 23 | * @return {Object} Active icon style object |
| 24 | */ |
| 25 | export const getVkIconActiveStyle = () => ({ |
| 26 | color: '#fff', |
| 27 | background: '#1e1e1e', |
| 28 | }); |
| 29 | |
| 30 | /** |
| 31 | * Get icon style based on active state |
| 32 | * |
| 33 | * @param {boolean} isActive - Whether the icon should be in active state |
| 34 | * @param {Object} customStyle - Optional custom style to merge (highest precedence, will override base and active styles) |
| 35 | * @return {Object} Icon style object |
| 36 | * |
| 37 | * Style merge order: base → active (if isActive) → custom |
| 38 | */ |
| 39 | export const getVkIconStyle = (isActive = false, customStyle = {}) => { |
| 40 | const baseStyle = getVkIconBaseStyle(); |
| 41 | if (isActive) { |
| 42 | return { |
| 43 | ...baseStyle, |
| 44 | ...getVkIconActiveStyle(), |
| 45 | ...customStyle, |
| 46 | }; |
| 47 | } |
| 48 | return { |
| 49 | ...baseStyle, |
| 50 | ...customStyle, |
| 51 | }; |
| 52 | }; |
| 53 | |
| 54 | /** |
| 55 | * VK Panel Icon Component |
| 56 | * |
| 57 | * Ready-to-use icon component for PanelBody icon prop |
| 58 | * |
| 59 | * @param {Object} props - Component props |
| 60 | * @param {boolean} props.isActive - Whether the icon should be in active state |
| 61 | * @param {Object} props.customStyle - Optional custom style to merge (highest precedence, will override base and active styles) |
| 62 | * @return {JSX.Element} Icon component ready for PanelBody |
| 63 | */ |
| 64 | export const VkPanelIcon = ({ isActive = false, customStyle = {} }) => { |
| 65 | const iconStyle = getVkIconStyle(isActive, customStyle); |
| 66 | return <Icon icon={IconSVG} style={iconStyle} />; |
| 67 | }; |
| 68 | |
| 69 | export { IconSVG }; |
| 70 | export default IconSVG; |
| 71 |