feat(icons): add business icon set and improve devkit icon copy behavior
- add `src/shared/icons/business.js` with new business-related icons - move `Wallet03Icon` from `index.js` to `business.js` - update `index.js` to export icons from business module - add shift+click to copy JSX snippet in icons devkit page - update icon button tooltip to hint shift shortcut - document apostrophe escaping rule in icons README
This commit is contained in:
@@ -34,9 +34,14 @@ export default function IconsPage() {
|
||||
);
|
||||
}, [query, selectedCategory]);
|
||||
|
||||
const handleCopy = (name) => {
|
||||
const handleCopy = (name, e) => {
|
||||
if (e.shiftKey) {
|
||||
navigator.clipboard.writeText(`<${name} className="w-5 h-5" />`);
|
||||
toast.success(`JSX de ${name} copié`);
|
||||
} else {
|
||||
navigator.clipboard.writeText(name);
|
||||
toast.success(`${name} copié`);
|
||||
}
|
||||
};
|
||||
|
||||
const hasSidebar = categories.length > 0;
|
||||
@@ -81,8 +86,8 @@ export default function IconsPage() {
|
||||
{filtered.map(([name, IconComponent]) => (
|
||||
<button
|
||||
key={name}
|
||||
onClick={() => handleCopy(name)}
|
||||
title={name.replace('Icon', '')}
|
||||
onClick={(e) => handleCopy(name, e)}
|
||||
title={`${name.replace('Icon', '')} · Shift: JSX`}
|
||||
className="aspect-square flex flex-col items-center justify-between rounded-lg border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-900 hover:border-blue-500 dark:hover:border-blue-500 transition-colors duration-100 group cursor-pointer px-1 py-2 overflow-hidden"
|
||||
>
|
||||
<div className="flex-1 flex items-center justify-center w-full">
|
||||
|
||||
@@ -32,6 +32,9 @@ Add01Icon.keywords = ['add', 'plus', 'create', 'new', 'insert', 'ajouter', 'nouv
|
||||
- Toujours en **anglais et en français**
|
||||
- Mots au sens large : inclure les synonymes et usages contextuels
|
||||
- Pas de doublons inutiles entre variantes du même icône (ex. `Add01Icon` et `Add02Icon` partagent les mêmes keywords)
|
||||
- **Apostrophes dans les mots français** : les keywords sont des strings JS délimitées par `'`. Un mot comme `sac d'argent` contient une apostrophe qui casse la string. Deux solutions :
|
||||
- Éviter les expressions avec apostrophe : écrire `argent` plutôt que `sac d'argent`
|
||||
- Ou échapper : `'sac d\'argent'`
|
||||
|
||||
## Détecter les doublons
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -72,37 +72,12 @@ export const Settings02Icon = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Wallet03Icon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path d="M13.3896 1.75C14.6932 1.75 15.75 2.80679 15.75 4.11035V6.5H3.5791L12.4375 1.9502C12.737 1.81817 13.0613 1.75001 13.3896 1.75Z" fill="currentColor"></path>
|
||||
<path d="M15.0645 7.75C16.4275 7.74997 17.5267 7.74995 18.3916 7.86621C19.2917 7.98723 20.0495 8.24672 20.6514 8.84863C21.2533 9.45055 21.5128 10.2083 21.6338 11.1084C21.7501 11.9733 21.75 13.0725 21.75 14.4355V15.5645C21.75 16.9275 21.7501 18.0267 21.6338 18.8916C21.5128 19.7917 21.2533 20.5495 20.6514 21.1514C20.0495 21.7533 19.2917 22.0128 18.3916 22.1338C17.5267 22.2501 16.4275 22.25 15.0645 22.25H8.93555C7.57249 22.25 6.47331 22.2501 5.6084 22.1338C4.70829 22.0128 3.95055 21.7533 3.34863 21.1514C2.74672 20.5495 2.48723 19.7917 2.36621 18.8916C2.24995 18.0267 2.24997 16.9275 2.25 15.5645V8.5L2.25391 8.42285C2.29253 8.04489 2.61184 7.75 3 7.75H15.0645ZM17.5 13.75C16.8096 13.75 16.25 14.3096 16.25 15C16.25 15.6904 16.8096 16.25 17.5 16.25C18.1904 16.25 18.75 15.6904 18.75 15C18.75 14.3096 18.1904 13.75 17.5 13.75Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const PaintBrush04Icon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M12 1.25C10.4812 1.25 9.25 2.48122 9.25 4V6.55337C9.25 7.53787 8.60995 8.40804 7.67014 8.70126L6.8831 8.94682C5.31674 9.43552 4.25 10.8858 4.25 12.5266C4.25 13.4931 5.0335 14.2766 6 14.2766H19C19.9665 14.2766 20.75 13.4931 20.75 12.5266C20.75 10.8858 19.6833 9.43552 18.1169 8.94682L17.3299 8.70126C16.39 8.40804 15.75 7.53787 15.75 6.55337V4C15.75 2.48122 14.5188 1.25 13 1.25H12ZM6 15.776H19C19.1284 15.776 19.255 15.7686 19.3795 15.7541C19.6769 15.7195 19.8256 15.7022 19.917 15.7626C20.0083 15.8229 20.0436 15.9425 20.1142 16.1818C20.4828 17.4304 20.6396 18.7569 20.7095 19.8235L20.7126 19.8706C20.7398 20.2842 20.7653 20.6734 20.7384 20.9966C20.7079 21.364 20.6041 21.7417 20.3004 22.065C19.9944 22.3907 19.5276 22.5404 19.1667 22.6201C18.7653 22.7088 18.308 22.7488 17.8667 22.7494C17.4249 22.7499 16.9697 22.7109 16.5715 22.6267C16.2149 22.5513 15.7544 22.4107 15.4487 22.1059C15.1392 21.7972 15.0264 21.4217 14.9785 21.0663C14.9475 20.8364 14.6682 20.7115 14.4805 20.8478C14.2083 21.0455 13.9194 21.2218 13.6197 21.3787C12.3465 22.0453 10.8297 22.3916 9.41285 22.5678C7.98809 22.745 6.6165 22.7556 5.60582 22.7231C5.09907 22.7068 4.67969 22.6795 4.38554 22.6561C3.88039 22.5678 3.43409 22.4231 3.32298 22.19C3.21188 21.9569 3.22848 21.6831 3.36692 21.4651C4.0635 20.3685 4.57655 19.0543 4.89533 17.8491C5.03501 17.321 5.13296 16.8309 5.19428 16.4029C5.24053 16.08 5.26366 15.9186 5.34902 15.8452C5.43438 15.7718 5.6144 15.7732 5.97444 15.7759L6 15.776Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const CoinsDollarIcon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path d="M2.98518 10.205C3.25477 9.87578 3.38957 9.71117 3.52054 9.75808C3.65152 9.80499 3.65113 10.0334 3.65034 10.4901C3.65033 10.4959 3.65032 10.5017 3.65032 10.5075C3.65032 15.9432 8.05682 20.3497 13.4925 20.3497C13.4983 20.3497 13.5041 20.3497 13.5099 20.3497C13.9666 20.3489 14.195 20.3485 14.2419 20.4795C14.2888 20.6104 14.1242 20.7452 13.795 21.0148C12.4705 22.0994 10.777 22.7502 8.9315 22.7502C4.68901 22.7502 1.24979 19.311 1.24979 15.0685C1.24979 13.223 1.90057 11.5295 2.98518 10.205Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M13.9998 1.25021C9.16729 1.25021 5.24979 5.16772 5.24979 10.0002C5.24979 14.8327 9.16729 18.7502 13.9998 18.7502C18.8323 18.7502 22.7498 14.8327 22.7498 10.0002C22.7498 5.16772 18.8323 1.25021 13.9998 1.25021ZM14.7349 6.00021C14.7349 5.586 14.3991 5.25021 13.9849 5.25021C13.5706 5.25021 13.2349 5.586 13.2349 6.00021L13.2349 6.24154C12.2127 6.52453 11.3877 7.37238 11.3877 8.50244C11.3877 9.09286 11.5613 9.69279 12.0899 10.1143C12.58 10.5051 13.2476 10.6352 13.9849 10.6352C14.5986 10.6352 14.8987 10.7459 15.0379 10.8533C15.1337 10.9273 15.2499 11.0732 15.2499 11.4983C15.2499 11.8491 15.1281 12.017 14.9752 12.1258C14.7842 12.2615 14.4549 12.3615 13.9849 12.3615C13.2343 12.3615 12.8018 11.9346 12.7327 11.618C12.6443 11.2133 12.2446 10.9569 11.84 11.0453C11.4353 11.1336 11.1789 11.5333 11.2672 11.938C11.4753 12.8911 12.2886 13.5446 13.2349 13.7724V14.0002C13.2349 14.4144 13.5706 14.7502 13.9849 14.7502C14.3991 14.7502 14.7349 14.4144 14.7349 14.0002V13.7962C15.1304 13.7232 15.5137 13.5833 15.8443 13.3483C16.4207 12.9385 16.7499 12.2998 16.7499 11.4983C16.7499 10.7712 16.5304 10.1105 15.9545 9.66596C15.4219 9.25485 14.7145 9.13516 13.9849 9.13516C13.3787 9.13516 13.1227 9.01933 13.0251 8.94149C12.966 8.89438 12.8877 8.80296 12.8877 8.50244C12.8877 8.11792 13.2803 7.63928 13.9849 7.63928C14.6033 7.63928 14.9994 8.02282 15.0689 8.3698C15.1503 8.77594 15.5455 9.0392 15.9517 8.95782C16.3578 8.87643 16.6211 8.48121 16.5397 8.07507C16.3555 7.15608 15.6243 6.48479 14.7349 6.24037V6.00021Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const TaxesIcon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path d="M9.85962 1.76207C10.601 1.43823 11.271 1.25 12 1.25C12.729 1.25 13.3991 1.43823 14.1405 1.76206C14.8595 2.07612 15.6933 2.54014 16.742 3.12379L20.8841 5.42893C21.4605 5.74971 21.9429 6.15261 22.2743 6.69585C22.6074 7.24181 22.75 7.86731 22.75 8.56907C22.7505 8.82453 22.7511 9.14972 22.6895 9.38151C22.5345 9.9648 22.1653 10.3408 21.713 10.5422C21.3056 10.7238 20.863 10.75 20.5308 10.75H3.46932C3.13708 10.75 2.69448 10.7238 2.28708 10.5422C1.83482 10.3408 1.46556 9.9648 1.3106 9.38151C1.24902 9.14972 1.24957 8.82452 1.25004 8.56907C1.25004 7.86731 1.39269 7.24181 1.72574 6.69585C2.05714 6.15261 2.53955 5.74971 3.11596 5.42893L7.25811 3.12378L7.25812 3.12377C8.30684 2.54014 9.14062 2.07612 9.85962 1.76207Z" fill="currentColor"></path>
|
||||
<path d="M1.25 21.5C1.25 19.4289 2.92893 17.75 5 17.75H11C11.4142 17.75 11.75 18.0858 11.75 18.5V22C11.75 22.4142 11.4142 22.75 11 22.75H2.5C1.80964 22.75 1.25 22.1904 1.25 21.5Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M13.7929 22.2071C13.4024 21.8166 13.4024 21.1834 13.7929 20.7929L20.7929 13.7929C21.1834 13.4024 21.8166 13.4024 22.2071 13.7929C22.5976 14.1834 22.5976 14.8166 22.2071 15.2071L15.2071 22.2071C14.8166 22.5976 14.1834 22.5976 13.7929 22.2071Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M13.5 15C13.5 14.1716 14.1716 13.5 15 13.5C15.8284 13.5 16.5 14.1716 16.5 15C16.5 15.8284 15.8284 16.5 15 16.5C14.1716 16.5 13.5 15.8284 13.5 15Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M19.5 21C19.5 20.1716 20.1716 19.5 21 19.5C21.8284 19.5 22.5 20.1716 22.5 21C22.5 21.8284 21.8284 22.5 21 22.5C20.1716 22.5 19.5 21.8284 19.5 21Z" fill="currentColor"></path>
|
||||
<path d="M3.24988 17.0825V11.7461L8.74988 11.7497V16.7498H4.99988C4.38188 16.7498 3.79144 16.8678 3.24988 17.0825Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ServerStack01Icon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M19.0253 13.25H19.0253C19.4697 13.25 19.8408 13.25 20.1454 13.2708C20.4625 13.2924 20.762 13.339 21.0524 13.4593C21.7262 13.7384 22.2616 14.2738 22.5407 14.9476C22.661 15.238 22.7076 15.5375 22.7292 15.8546C22.75 16.1592 22.75 16.5808 22.75 17.0253C22.75 17.4697 22.75 17.8408 22.7292 18.1454C22.7076 18.4625 22.661 18.762 22.5407 19.0524C22.2616 19.7262 21.7262 20.2616 21.0524 20.5407C20.762 20.661 20.4625 20.7076 20.1454 20.7292C19.8408 20.75 19.4697 20.75 19.0253 20.75H4.97474C4.53028 20.75 4.15925 20.75 3.85464 20.7292C3.53754 20.7076 3.23801 20.661 2.94762 20.5407C2.27379 20.2616 1.73844 19.7262 1.45933 19.0524C1.33905 18.762 1.29241 18.4625 1.27077 18.1454C1.24999 17.8408 1.24999 17.4697 1.25 17.0253V17.0253V17.0253C1.24999 16.5808 1.24999 16.1592 1.27077 15.8546C1.29241 15.5375 1.33905 15.238 1.45933 14.9476C1.73844 14.2738 2.27379 13.7384 2.94762 13.4593C3.23801 13.339 3.53754 13.2924 3.85464 13.2708C4.15924 13.25 4.53027 13.25 4.97472 13.25H4.97474H4.97475H19.0253ZM5 17C5 16.4477 5.44772 16 6 16H6.01C6.56229 16 7.01 16.4477 7.01 17C7.01 17.5523 6.56229 18 6.01 18H6C5.44772 18 5 17.5523 5 17ZM10 16C9.44772 16 9 16.4477 9 17C9 17.5523 9.44772 18 10 18H10.01C10.5623 18 11.01 17.5523 11.01 17C11.01 16.4477 10.5623 16 10.01 16H10Z" fill="currentColor"></path>
|
||||
@@ -151,16 +126,6 @@ export const CloudUploadIcon = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const ChartBarLineIcon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M4 14C4.55228 14 5 14.4477 5 15L5 19C5 19.5523 4.55228 20 4 20C3.44772 20 3 19.5523 3 19L3 15C3 14.4477 3.44772 14 4 14Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M12 8C12.5523 8 13 8.44772 13 9L13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19L11 9C11 8.44772 11.4477 8 12 8Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M23 22C23 22.5523 22.5523 23 22 23L2 23C1.44771 23 1 22.5523 1 22C1 21.4477 1.44771 21 2 21L22 21C22.5523 21 23 21.4477 23 22Z" fill="currentColor"></path>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M20 12C20.5523 12 21 12.4477 21 13L21 19C21 19.5523 20.5523 20 20 20C19.4477 20 19 19.5523 19 19L19 13C19 12.4477 19.4477 12 20 12Z" fill="currentColor"></path>
|
||||
<path d="M9 4C9 2.34315 10.3431 1 12 1C13.6569 1 15 2.34315 15 4C15 4.1253 14.9923 4.249 14.9772 4.37058L17.9175 5.84073C18.4565 5.3208 19.1904 5 20 5C21.6569 5 23 6.34314 23 8C23 9.65685 21.6569 11 20 11C18.3431 11 17 9.65685 17 8C17 7.87469 17.0077 7.751 17.0228 7.62942L14.0825 6.15926C13.5435 6.6792 12.8096 7 12 7C11.3848 7 10.8128 6.81439 10.3371 6.49714L6.8632 9.1026C6.95207 9.38626 7 9.68784 7 10C7 11.6569 5.65685 13 4 13C2.34315 13 1 11.6569 1 10C1 8.34315 2.34315 7 4 7C4.61523 7 5.18723 7.18561 5.66286 7.50286L9.1368 4.8974C9.04793 4.61374 9 4.31216 9 4Z" fill="currentColor"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Notification01Icon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path d="M15.75 20C15.0345 21.3387 13.624 22.25 12 22.25C10.376 22.25 8.96548 21.3387 8.25 20H15.75ZM12 1.75C16.2802 1.75 19.75 5.21979 19.75 9.5V12.2559C19.75 12.8526 19.9872 13.4247 20.4092 13.8467L21.0127 14.4502C21.4849 14.9225 21.75 15.5635 21.75 16.2314C21.7498 17.6223 20.6223 18.7498 19.2314 18.75H4.76855C3.37767 18.7498 2.25017 17.6223 2.25 16.2314C2.25 15.5635 2.51512 14.9225 2.9873 14.4502L3.59082 13.8467L3.74023 13.6816C4.06829 13.2813 4.24999 12.778 4.25 12.2559V9.5C4.25 5.21979 7.71979 1.75 12 1.75Z" fill="currentColor"></path>
|
||||
@@ -245,12 +210,6 @@ export const PlusSignCircleIcon = (props) => (
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const DollarCircleIcon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V7.42416C10.6347 7.52886 10.0701 7.7612 9.61196 8.09711C8.97319 8.56549 8.5 9.2746 8.5 10.1278C8.5 10.8783 8.76936 11.572 9.45777 12.0328C10.0819 12.4507 10.9522 12.6062 12 12.6062C12.9582 12.6062 13.5279 12.7501 13.8421 12.9537C14.088 13.1131 14.25 13.354 14.25 13.8726C14.25 14.3084 14.0711 14.5775 13.7369 14.777C13.3572 15.0037 12.7608 15.1391 12 15.1391C11.3002 15.1391 10.7004 14.9471 10.2971 14.676C9.88907 14.4018 9.75 14.1036 9.75 13.8726C9.75 13.4584 9.41421 13.1226 9 13.1226C8.58579 13.1226 8.25 13.4584 8.25 13.8726C8.25 14.7554 8.78251 15.4654 9.46029 15.921C9.9609 16.2574 10.5786 16.4867 11.25 16.585V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V16.6006C13.3866 16.5325 13.9974 16.3684 14.5057 16.065C15.2573 15.6163 15.75 14.8772 15.75 13.8726C15.75 12.951 15.412 12.1837 14.6579 11.6949C13.9721 11.2504 13.0418 11.1062 12 11.1062C11.0478 11.1062 10.5431 10.9543 10.2922 10.7864C10.1056 10.6615 10 10.4909 10 10.1278C10 9.86732 10.1424 9.56819 10.4989 9.30676C10.855 9.04566 11.3833 8.86133 12 8.86133C12.6167 8.86133 13.145 9.04566 13.501 9.30676C13.8576 9.56819 14 9.86732 14 10.1278C14 10.542 14.3358 10.8778 14.75 10.8778C15.1642 10.8778 15.5 10.542 15.5 10.1278C15.5 9.2746 15.0268 8.56549 14.388 8.09711C13.9299 7.7612 13.3653 7.52886 12.75 7.42416V7Z" fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const EyeIcon = (props) => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
|
||||
<path d="M19.6394 4.92727C17.7538 3.62477 15.0524 2.25006 12 2.25006C8.94754 2.25006 6.24623 3.62477 4.36059 4.92727C3.40824 5.58509 2.63885 6.24185 2.10627 6.7352C1.84641 6.97592 1.42162 7.41195 1.26679 7.57089L1.25501 7.58298C0.886591 7.99442 0.921469 8.62663 1.33291 8.99505C1.74408 9.36321 2.3757 9.32863 2.74422 8.91798L2.745 8.91712C2.86754 8.79136 3.22617 8.42405 3.46541 8.20242C3.94489 7.75827 4.63997 7.16503 5.49727 6.57285C7.23091 5.37535 9.5296 4.25006 12 4.25006C14.4704 4.25006 16.7691 5.37535 18.5027 6.57285C19.36 7.16503 20.0551 7.75827 20.5346 8.20242C20.7738 8.42405 21.1332 8.79222 21.2558 8.91798C21.6243 9.32863 22.2559 9.36321 22.6671 8.99505C23.0785 8.62663 23.1134 7.99442 22.745 7.58298L22.7331 7.57077C22.5781 7.41174 22.1535 6.97586 21.8937 6.7352C21.3611 6.24185 20.5917 5.58509 19.6394 4.92727Z" fill="currentColor"></path>
|
||||
|
||||
Reference in New Issue
Block a user