@zenkigen-inc/component-icons 1.14.3 → 1.14.5

package/README.md

@@ -1,5 +1,82 @@
 # @zenkigen-inc/component-icons
 
+コンポーネントで使用するアイコンを管理するパッケージです。
+
+## 使い方
+
+インストール:
+
+```bash
+yarn add @zenkigen-inc/component-icons
+```
+
+アイコンのインポート:
+
+```tsx
+import { iconElements } from '@zenkigen-inc/component-icons';
+
+// アイコンを表示する
+<div>{iconElements['add']}</div>;
+```
+
+## SVGアイコンの追加方法
+
+新しいSVGアイコンを追加するには、以下の手順に従ってください。
+
+### 1. SVGファイルの準備
+
+SVGファイルは以下の条件を満たす必要があります:
+
+- サイズ: 基本的に24x24サイズを推奨
+- 命名: キャメルケースまたはケバブケース (例: `arrow-right.svg`、`userAdd.svg`)
+- フォーマット: 基本的なSVG構造を持つこと
+
+以下は適切なSVGファイルの例です:
+
+```svg
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.276 12.724H4.72399C4.3258 12.724 4 12.3982 4 12C4 11.6018 4.3258 11.276 4.72399 11.276H11.276V4.72398C11.276 4.32579 11.6018 4 12 4C12.3982 4 12.724 4.32579 12.724 4.72398V11.276H19.276C19.6742 11.276 20 11.6018 20 12C20 12.3982 19.6742 12.724 19.276 12.724H12.724V19.276C12.724 19.6742 12.3982 20 12 20C11.6018 20 11.276 19.6742 11.276 19.276V12.724Z" fill="#7C868A"/>
+</svg>
+```
+
+> **注意**: `fill`属性はコード生成時に削除されるため、アイコン表示時のスタイルに影響しません。
+
+### 2. SVGファイルの配置
+
+準備したSVGファイルを以下のディレクトリに配置します:
+
+```
+packages/component-icons/src/svg/
+```
+
+### 3. ビルド実行
+
+以下のコマンドを実行してアイコンをビルドします:
+
+```bash
+yarn build:all
+```
+
+このビルドプロセスで以下の処理が行われます:
+
+1. `codegen.cjs` スクリプトが実行され、SVGフォルダ内のファイルが読み込まれます
+2. 各SVGファイルから不要な属性が削除されます
+3. テンプレートを使用して `icon.tsx` が生成されます
+4. パッケージがビルドされます
+
+### 4. アイコンの利用
+
+ビルド後、追加したアイコンは `iconElements` オブジェクトから使用できます:
+
+```tsx
+import { iconElements } from '@zenkigen-inc/component-icons';
+
+// 追加したアイコンを表示
+<div>{iconElements['new-icon-name']}</div>;
+```
+
+アイコン名は、ファイル名から拡張子を除いたものになります (例: `arrow-right.svg` → `'arrow-right'`)
+
 ## ライセンス
 
 @zenkigen-inc/component-icons は MIT ライセンスに基づいています。  

package/dist/icon.d.ts

@@ -1,5 +1,6 @@
-export type IconName = 'add' | 'ai' | 'angle-down' | 'angle-left' | 'angle-right' | 'angle-small-down' | 'angle-small-up' | 'angle-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'attachment' | 'attention' | 'building' | 'calendar-check' | 'calendar-draft' | 'calendar-minus' | 'calendar-today' | 'calendar' | 'caret-down' | 'caret-right' | 'chart-bar' | 'chart-line' | 'check' | 'circle' | 'close' | 'comment' | 'contract' | 'copy' | 'delete' | 'document' | 'documents' | 'double circle' | 'download-document' | 'download' | 'edit' | 'email' | 'expand' | 'external-link' | 'filter' | 'flag' | 'global' | 'graph-line' | 'hamburger-close' | 'hamburger' | 'help' | 'hint' | 'home' | 'image' | 'information-filled' | 'information' | 'input-delete' | 'link' | 'list' | 'logout' | 'message-text' | 'more' | 'movie' | 'notification' | 'pause' | 'pdf' | 'picture-in-picture' | 'play-filled' | 'play' | 'presentation' | 'remove' | 'score' | 'search' | 'send' | 'share' | 'shuffle' | 'sidebar' | 'slider-editing' | 'sort-down' | 'sort-up' | 'sort' | 'sparkle' | 'star-filled' | 'star' | 'store' | 'success-filled' | 'table-download' | 'table-upload' | 'table' | 'timer' | 'transcription' | 'triangle' | 'upload' | 'user-add' | 'user-group' | 'user-line' | 'user-multi' | 'user-one' | 'user-photograph' | 'user-remove' | 'user' | 'video' | 'volume-off' | 'volume' | 'warning';
+import type React from 'react';
+export type IconName = 'warning' | 'volume' | 'volume-off' | 'video' | 'user' | 'user-remove' | 'user-photograph' | 'user-one' | 'user-multi' | 'user-line' | 'user-group' | 'user-add' | 'upload' | 'triangle' | 'transcription' | 'timer' | 'table' | 'table-upload' | 'table-download' | 'success-filled' | 'store' | 'star' | 'star-filled' | 'sparkle' | 'sort' | 'sort-up' | 'sort-down' | 'slider-editing' | 'sidebar' | 'shuffle' | 'share' | 'send' | 'search' | 'score' | 'remove' | 'presentation' | 'play' | 'play-filled' | 'picture-in-picture' | 'pdf' | 'pause' | 'notification' | 'movie' | 'more' | 'message-text' | 'logout' | 'list' | 'link' | 'input-delete' | 'information' | 'information-filled' | 'image' | 'home' | 'hint' | 'help' | 'hamburger' | 'hamburger-close' | 'graph-line' | 'global' | 'flag' | 'filter' | 'external-link' | 'expand' | 'email' | 'edit' | 'download' | 'download-document' | 'double circle' | 'documents' | 'document' | 'delete' | 'copy' | 'contract' | 'comment' | 'close' | 'circle' | 'check' | 'chart-line' | 'chart-bar' | 'caret-right' | 'caret-down' | 'calendar' | 'calendar-today' | 'calendar-minus' | 'calendar-draft' | 'calendar-check' | 'building' | 'attention' | 'attachment' | 'arrow-up' | 'arrow-right' | 'arrow-left' | 'arrow-down' | 'angle-up' | 'angle-small-up' | 'angle-small-down' | 'angle-right' | 'angle-left' | 'angle-down' | 'ai' | 'add';
 export type IconElements = Readonly<{
-    [name in IconName]: JSX.Element;
+    [name in IconName]: React.ReactElement;
 }>;
 export declare const iconElements: IconElements;

package/dist/icons/add.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const addIcon: React.ReactElement;

package/dist/icons/ai.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const aiIcon: React.ReactElement;

package/dist/icons/angle-down.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const angledownIcon: React.ReactElement;

package/dist/icons/angle-left.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const angleleftIcon: React.ReactElement;

package/dist/icons/angle-right.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const anglerightIcon: React.ReactElement;

package/dist/icons/angle-small-down.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const anglesmalldownIcon: React.ReactElement;

package/dist/icons/angle-small-up.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const anglesmallupIcon: React.ReactElement;

package/dist/icons/angle-up.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const angleupIcon: React.ReactElement;

package/dist/icons/arrow-down.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const arrowdownIcon: React.ReactElement;

package/dist/icons/arrow-left.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const arrowleftIcon: React.ReactElement;

package/dist/icons/arrow-right.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const arrowrightIcon: React.ReactElement;

package/dist/icons/arrow-up.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const arrowupIcon: React.ReactElement;

package/dist/icons/attachment.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const attachmentIcon: React.ReactElement;

package/dist/icons/attention.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const attentionIcon: React.ReactElement;

package/dist/icons/building.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const buildingIcon: React.ReactElement;

package/dist/icons/calendar-check.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const calendarcheckIcon: React.ReactElement;

package/dist/icons/calendar-draft.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const calendardraftIcon: React.ReactElement;

package/dist/icons/calendar-minus.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const calendarminusIcon: React.ReactElement;

package/dist/icons/calendar-today.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const calendartodayIcon: React.ReactElement;

package/dist/icons/calendar.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const calendarIcon: React.ReactElement;

package/dist/icons/caret-down.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const caretdownIcon: React.ReactElement;

package/dist/icons/caret-right.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const caretrightIcon: React.ReactElement;

package/dist/icons/chart-bar.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const chartbarIcon: React.ReactElement;

package/dist/icons/chart-line.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const chartlineIcon: React.ReactElement;

package/dist/icons/check.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const checkIcon: React.ReactElement;

package/dist/icons/circle.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const circleIcon: React.ReactElement;

package/dist/icons/close.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const closeIcon: React.ReactElement;

package/dist/icons/comment.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const commentIcon: React.ReactElement;

package/dist/icons/contract.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const contractIcon: React.ReactElement;

package/dist/icons/copy.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const copyIcon: React.ReactElement;

package/dist/icons/delete.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const deleteIcon: React.ReactElement;

package/dist/icons/document.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const documentIcon: React.ReactElement;

package/dist/icons/documents.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const documentsIcon: React.ReactElement;

package/dist/icons/double circle.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const doublecircleIcon: React.ReactElement;

package/dist/icons/download-document.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const downloaddocumentIcon: React.ReactElement;

package/dist/icons/download.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const downloadIcon: React.ReactElement;

package/dist/icons/edit.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const editIcon: React.ReactElement;

package/dist/icons/email.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const emailIcon: React.ReactElement;

package/dist/icons/expand.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const expandIcon: React.ReactElement;

package/dist/icons/external-link.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const externallinkIcon: React.ReactElement;

package/dist/icons/filter.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const filterIcon: React.ReactElement;

package/dist/icons/flag.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const flagIcon: React.ReactElement;

package/dist/icons/global.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const globalIcon: React.ReactElement;

package/dist/icons/graph-line.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const graphlineIcon: React.ReactElement;

package/dist/icons/hamburger-close.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const hamburgercloseIcon: React.ReactElement;

package/dist/icons/hamburger.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const hamburgerIcon: React.ReactElement;

package/dist/icons/help.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const helpIcon: React.ReactElement;

package/dist/icons/hint.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const hintIcon: React.ReactElement;

package/dist/icons/home.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const homeIcon: React.ReactElement;

package/dist/icons/image.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const imageIcon: React.ReactElement;

package/dist/icons/information-filled.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const informationfilledIcon: React.ReactElement;

package/dist/icons/information.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const informationIcon: React.ReactElement;

package/dist/icons/input-delete.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const inputdeleteIcon: React.ReactElement;

package/dist/icons/link.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const linkIcon: React.ReactElement;

package/dist/icons/list.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const listIcon: React.ReactElement;

package/dist/icons/logout.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const logoutIcon: React.ReactElement;

package/dist/icons/message-text.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const messagetextIcon: React.ReactElement;

package/dist/icons/more.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const moreIcon: React.ReactElement;

package/dist/icons/movie.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const movieIcon: React.ReactElement;

package/dist/icons/notification.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const notificationIcon: React.ReactElement;

package/dist/icons/pause.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const pauseIcon: React.ReactElement;

package/dist/icons/pdf.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const pdfIcon: React.ReactElement;

package/dist/icons/picture-in-picture.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const pictureinpictureIcon: React.ReactElement;

package/dist/icons/play-filled.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const playfilledIcon: React.ReactElement;

package/dist/icons/play.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const playIcon: React.ReactElement;

package/dist/icons/presentation.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const presentationIcon: React.ReactElement;

package/dist/icons/remove.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const removeIcon: React.ReactElement;

package/dist/icons/score.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const scoreIcon: React.ReactElement;

package/dist/icons/search.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const searchIcon: React.ReactElement;

package/dist/icons/send.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const sendIcon: React.ReactElement;

package/dist/icons/share.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const shareIcon: React.ReactElement;

package/dist/icons/shuffle.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const shuffleIcon: React.ReactElement;

package/dist/icons/sidebar.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const sidebarIcon: React.ReactElement;

package/dist/icons/slider-editing.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const slidereditingIcon: React.ReactElement;

package/dist/icons/sort-down.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const sortdownIcon: React.ReactElement;

package/dist/icons/sort-up.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const sortupIcon: React.ReactElement;

package/dist/icons/sort.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const sortIcon: React.ReactElement;

package/dist/icons/sparkle.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const sparkleIcon: React.ReactElement;

package/dist/icons/star-filled.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const starfilledIcon: React.ReactElement;

package/dist/icons/star.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const starIcon: React.ReactElement;

package/dist/icons/store.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const storeIcon: React.ReactElement;

package/dist/icons/success-filled.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const successfilledIcon: React.ReactElement;

package/dist/icons/table-download.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const tabledownloadIcon: React.ReactElement;

package/dist/icons/table-upload.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const tableuploadIcon: React.ReactElement;

package/dist/icons/table.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const tableIcon: React.ReactElement;

package/dist/icons/timer.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const timerIcon: React.ReactElement;

package/dist/icons/transcription.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const transcriptionIcon: React.ReactElement;

package/dist/icons/triangle.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const triangleIcon: React.ReactElement;

package/dist/icons/upload.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const uploadIcon: React.ReactElement;

package/dist/icons/user-add.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const useraddIcon: React.ReactElement;

package/dist/icons/user-group.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const usergroupIcon: React.ReactElement;

package/dist/icons/user-line.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const userlineIcon: React.ReactElement;

package/dist/icons/user-multi.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const usermultiIcon: React.ReactElement;

package/dist/icons/user-one.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const useroneIcon: React.ReactElement;

package/dist/icons/user-photograph.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const userphotographIcon: React.ReactElement;

package/dist/icons/user-remove.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const userremoveIcon: React.ReactElement;

package/dist/icons/user.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const userIcon: React.ReactElement;

package/dist/icons/video.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const videoIcon: React.ReactElement;

package/dist/icons/volume-off.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const volumeoffIcon: React.ReactElement;

package/dist/icons/volume.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const volumeIcon: React.ReactElement;

package/dist/icons/warning.d.ts

@@ -0,0 +1,2 @@
+import type React from 'react';
+export declare const warningIcon: React.ReactElement;