From f9103c4e9fefabb5ff7df8fbae5c93d4a12722aa Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:57:28 +0900 Subject: [PATCH 01/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20airport=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/airport.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/airport.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/airport.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/airport.mdx diff --git a/docs/carmore-icon/icons/airport.mdx b/docs/carmore-icon/icons/airport.mdx new file mode 100644 index 0000000..9f577a5 --- /dev/null +++ b/docs/carmore-icon/icons/airport.mdx @@ -0,0 +1,108 @@ +--- +id: airport +title: Airport +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Airport + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '공항' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('공항') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/airport.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/airport.mdx new file mode 100644 index 0000000..3e61b0b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/airport.mdx @@ -0,0 +1,108 @@ +--- +id: airport +title: Airport +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Airport + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('공항') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '공항'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('공항') + + +``` From 75bd04e35d736f92545d2fe2d7336198175d3fdc Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:57:51 +0900 Subject: [PATCH 02/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20anchor=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/anchor.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/anchor.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/anchor.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/anchor.mdx diff --git a/docs/carmore-icon/icons/anchor.mdx b/docs/carmore-icon/icons/anchor.mdx new file mode 100644 index 0000000..3b32daa --- /dev/null +++ b/docs/carmore-icon/icons/anchor.mdx @@ -0,0 +1,108 @@ +--- +id: anchor +title: Anchor +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Anchor + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '닻' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('닻') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/anchor.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/anchor.mdx new file mode 100644 index 0000000..c49f807 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/anchor.mdx @@ -0,0 +1,108 @@ +--- +id: anchor +title: Anchor +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Anchor + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '닻'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('닻') + + +``` From 56c8fc0781d004bf3e6228d2825c2619ff2596c0 Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:58:06 +0900 Subject: [PATCH 03/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20bus=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/bus.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/bus.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/bus.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/bus.mdx diff --git a/docs/carmore-icon/icons/bus.mdx b/docs/carmore-icon/icons/bus.mdx new file mode 100644 index 0000000..5e46c2c --- /dev/null +++ b/docs/carmore-icon/icons/bus.mdx @@ -0,0 +1,108 @@ +--- +id: bus +title: Bus +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Bus + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '버스' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('버스') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/bus.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/bus.mdx new file mode 100644 index 0000000..9d13e95 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/bus.mdx @@ -0,0 +1,108 @@ +--- +id: bus +title: Bus +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Bus + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '버스'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('버스') + + +``` From dbaf221da8f700e60293845841411e53652d79f6 Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:58:26 +0900 Subject: [PATCH 04/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20car=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/car.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/car.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/car.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/car.mdx diff --git a/docs/carmore-icon/icons/car.mdx b/docs/carmore-icon/icons/car.mdx new file mode 100644 index 0000000..1f9835b --- /dev/null +++ b/docs/carmore-icon/icons/car.mdx @@ -0,0 +1,108 @@ +--- +id: car +title: Car +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Car + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '차량' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('차량') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/car.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/car.mdx new file mode 100644 index 0000000..8615a56 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/car.mdx @@ -0,0 +1,108 @@ +--- +id: car +title: Car +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Car + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '차량'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('차량') + + +``` From 7508a7e544697bc524406de49542f31c5129b3d5 Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:58:44 +0900 Subject: [PATCH 05/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20rental-house?= =?UTF-8?q?=20=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/rental-house.mdx | 108 ++++++++++++++++++ .../carmore-icon/icons/rental-house.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/rental-house.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/rental-house.mdx diff --git a/docs/carmore-icon/icons/rental-house.mdx b/docs/carmore-icon/icons/rental-house.mdx new file mode 100644 index 0000000..a773059 --- /dev/null +++ b/docs/carmore-icon/icons/rental-house.mdx @@ -0,0 +1,108 @@ +--- +id: rental-house +title: Call +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Call + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '숙소' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('숙소') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/rental-house.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/rental-house.mdx new file mode 100644 index 0000000..1ca7602 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/rental-house.mdx @@ -0,0 +1,108 @@ +--- +id: rental-house +title: RentalHouse +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# RentalHouse + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '숙소'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('숙소') + + +``` From 44b618db3b3f6de3d27d48d20335e3c3c315b722 Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:59:01 +0900 Subject: [PATCH 06/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20station=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/station.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/station.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/station.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/station.mdx diff --git a/docs/carmore-icon/icons/station.mdx b/docs/carmore-icon/icons/station.mdx new file mode 100644 index 0000000..474d2b7 --- /dev/null +++ b/docs/carmore-icon/icons/station.mdx @@ -0,0 +1,108 @@ +--- +id: station +title: Station +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Station + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '역' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('역') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/station.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/station.mdx new file mode 100644 index 0000000..0a5268a --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/station.mdx @@ -0,0 +1,108 @@ +--- +id: station +title: Station +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Station + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '역'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('역') + + +``` From 4bf4f01ccb0c998334307bea4e31041037354db6 Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:59:12 +0900 Subject: [PATCH 07/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20walk=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/walk.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/walk.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/walk.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/walk.mdx diff --git a/docs/carmore-icon/icons/walk.mdx b/docs/carmore-icon/icons/walk.mdx new file mode 100644 index 0000000..780789d --- /dev/null +++ b/docs/carmore-icon/icons/walk.mdx @@ -0,0 +1,108 @@ +--- +id: walk +title: Walk +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Walk + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '산책' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('산책') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/walk.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/walk.mdx new file mode 100644 index 0000000..70bec4c --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/walk.mdx @@ -0,0 +1,108 @@ +--- +id: walk +title: Walk +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# Walk + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '산책'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('산책') + + +``` From 2bebe5ce979cd8eceabe36d3b824731a92f69c2a Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:59:23 +0900 Subject: [PATCH 08/10] =?UTF-8?q?FEAT:=20carmore-icon=20>=20with-car=20?= =?UTF-8?q?=EB=AC=B8=EC=84=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/carmore-icon/icons/with-car.mdx | 108 ++++++++++++++++++ .../current/carmore-icon/icons/with-car.mdx | 108 ++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 docs/carmore-icon/icons/with-car.mdx create mode 100644 i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/with-car.mdx diff --git a/docs/carmore-icon/icons/with-car.mdx b/docs/carmore-icon/icons/with-car.mdx new file mode 100644 index 0000000..5b6701b --- /dev/null +++ b/docs/carmore-icon/icons/with-car.mdx @@ -0,0 +1,108 @@ +--- +id: with-car +title: WithCar +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# WithCar + +
+ + + +## 사용법 + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## 크기 설정 + +아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다. + +- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다. + - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.) +- `width` 의 기본값은 '1.5rem' 입니다. +- `height` 의 기본값은 '1.5rem' 입니다. + + + +```tsx + // 기본값('1.5rem') 적용 + + + +``` + +
+
+ +## 색상 변경 + +`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## 접근성 (a11y) + +`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다. + +- `role` 의 기본값은 'img' 입니다. +- `aria-label` 의 기본값은 '차량' 입니다. +- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다. +- _(아이콘에 마우스를 올려보세요.)_ + + + +```tsx + // 기본값('차량') 적용 + + +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/with-car.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/with-car.mdx new file mode 100644 index 0000000..eeec17d --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/with-car.mdx @@ -0,0 +1,108 @@ +--- +id: with-car +title: WithCar +--- + +import IconProfile from '@site/src/molecules/carmore-icon/IconProfile'; + +import A11yPropsCompareList from '@site/src/organisms/carmore-icon/A11yPropsCompareList'; +import ColorPropsCompareList from '@site/src/organisms/carmore-icon/ColorPropsCompareList'; +import SizePropsCompareList from '@site/src/organisms/carmore-icon/SizePropsCompareList'; + +# WithCar + +
+ + + +## Usage + +```tsx +import { CarmoreIcon } from '@o2-ui/carmore-icon'; + +// ... + + + +// ... +``` + +
+
+ +## Control size + +You can control the icon size with the `width` and `height` props. + +- Pass numbers directly, or strings with units such as 'px', 'rem', or '%'. + - (The icon keeps its intrinsic aspect ratio and cannot be stretched.) +- The default `width` is '1.5rem'. +- The default `height` is '1.5rem'. + + + +```tsx + // Uses the default ('1.5rem') + + + +``` + +
+
+ +## Change color + +Set the text color via the `className` prop to recolor the icon. + + + +```css +.text-red { + color: red; +} + +.text-orange { + color: orange; +} + +.text-green { + color: green; +} + +.text-blue { + color: blue; +} + +.text-purple { + color: purple; +} +``` + +```tsx + + + + + +``` + +
+
+ +## Accessibility (a11y) + +We recommend configuring attributes such as `role` and `aria-label`. + +- The default `role` is 'img'. +- The default `aria-label` is '차량'. +- Base accessibility defaults are provided, and you can override them when needed. +- _(Hover the icon to check the tooltip.)_ + + + +```tsx + // Uses the default ('차량') + + +``` From 2b47cddace1ec6137f16b5fc8870a76a55898a6d Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Wed, 8 Oct 2025 18:59:48 +0900 Subject: [PATCH 09/10] =?UTF-8?q?FIX:=20carmore-icon=20>=20=EC=9E=98?= =?UTF-8?q?=EB=AA=BB=EB=90=9C=20=ED=91=9C=EA=B8=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../current/carmore-icon/icons/arrow-double-down.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/arrow-double-down.mdx b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/arrow-double-down.mdx index 0d22be4..84ae8ad 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/arrow-double-down.mdx +++ b/i18n/en/docusaurus-plugin-content-docs/current/carmore-icon/icons/arrow-double-down.mdx @@ -42,7 +42,7 @@ You can control the icon size with the `width` and `height` props. ```tsx - // Uses the default ('더 아래로') + // Uses the default ('1.5rem') From a850d1218288d6f7f6064069d1575d37c997af2a Mon Sep 17 00:00:00 2001 From: yunshin <2younsin@gmail.com> Date: Tue, 14 Oct 2025 00:11:22 +0900 Subject: [PATCH 10/10] FEAT: carmore-icon 1.2.1 install --- package.json | 2 +- src/contants/carmore-icon.ts | 10 ++++++++++ src/contants/version.ts | 2 +- yarn.lock | 8 ++++---- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 4c3db94..135c1b6 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@docusaurus/core": "3.8.1", "@docusaurus/preset-classic": "3.8.1", "@mdx-js/react": "^3.0.0", - "@o2-ui/carmore-icon": "^1.1.0", + "@o2-ui/carmore-icon": "^1.2.1", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^19.0.0", diff --git a/src/contants/carmore-icon.ts b/src/contants/carmore-icon.ts index d51428a..1f3dc9f 100644 --- a/src/contants/carmore-icon.ts +++ b/src/contants/carmore-icon.ts @@ -9,6 +9,16 @@ type IIconItem = { }; const ICON_ITEM_MAP: IIconItem = { + // 1.2.1 + airport: { icon: 'airport', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/airport' }, + anchor: { icon: 'anchor', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/anchor' }, + bus: { icon: 'bus', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/bus' }, + car: { icon: 'car', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/car' }, + 'rental-house': { icon: 'rental-house', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/rental-house' }, + station: { icon: 'station', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/station' }, + walk: { icon: 'walk', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/walk' }, + 'with-car': { icon: 'with-car', releasedVersion: '1.2.1', detailPath: 'carmore-icon/icons/with-car' }, + // 1.1.0 'arrow-down-ktx': { icon: 'arrow-down-ktx', releasedVersion: '1.1.0', detailPath: 'carmore-icon/icons/arrow-down-ktx' }, 'arrow-left': { icon: 'arrow-left', releasedVersion: '1.1.0', detailPath: 'carmore-icon/icons/arrow-left' }, diff --git a/src/contants/version.ts b/src/contants/version.ts index b7f70bb..7ae1119 100644 --- a/src/contants/version.ts +++ b/src/contants/version.ts @@ -1,3 +1,3 @@ -const CAREMORE_ICON_LATEST_VERSION = '1.1.0'; +const CAREMORE_ICON_LATEST_VERSION = '1.2.1'; export { CAREMORE_ICON_LATEST_VERSION }; diff --git a/yarn.lock b/yarn.lock index 305dec6..ce136f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2153,10 +2153,10 @@ "@nodelib/fs.scandir" "2.1.5" fastq "^1.6.0" -"@o2-ui/carmore-icon@^1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@o2-ui/carmore-icon/-/carmore-icon-1.1.0.tgz#21cac29b178bd425cb7fd459f90039f593572c84" - integrity sha512-qfLQEY3Q/r3ViV6MlZMX3VnviKACpVF7rc8tZreLWDaONDrbxnejTxGAklkvWBxjbdI8QpnaCt0N+lloZ7JxPw== +"@o2-ui/carmore-icon@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@o2-ui/carmore-icon/-/carmore-icon-1.2.1.tgz#05078d6ce7736fc8c0744e5efcf2a7bd4e5af2f4" + integrity sha512-u5r5Sx52GGh/rdlcE5vFe/OFSsIGgF8TMjKLnSK+5+bEIdnMaZbsFuZtSfvC9hZo3GsNPwuKxJF1W+ftasVC/Q== "@pnpm/config.env-replace@^1.1.0": version "1.1.0"