Root/carmore icon 1.2.0

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
+
+<br />
+
+<IconProfile icon={'airport'} />
+
+## 사용법
+
+```tsx
+import { CarmoreIcon } from '@o2-ui/carmore-icon';
+
+// ...
+
+  <CarmoreIcon icon={'airport'} ... />
+
+// ...
+```
+
+<br />
+<br />
+
+## 크기 설정
+
+아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다.
+
+- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다.
+  - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.)
+- `width` 의 기본값은 '1.5rem' 입니다.
+- `height` 의 기본값은 '1.5rem' 입니다.
+
+<SizePropsCompareList icon={'airport'} sizes={['1.5rem', 30, '48px', '5rem']} />
+
+```tsx
+<CarmoreIcon icon={'airport'} ... /> // 기본값('1.5rem') 적용
+<CarmoreIcon icon={'airport'} width={30} height={30} ... />
+<CarmoreIcon icon={'airport'} width={'48px'} height={'48px'} ... />
+<CarmoreIcon icon={'airport'} width={'5rem'} height={'5rem'} ... />
+```
+
+<br />
+<br />
+
+## 색상 변경
+
+`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다.
+
+<ColorPropsCompareList icon={'airport'} colors={['red', 'orange', 'green', 'blue', 'purple']} />
+
+```css
+.text-red {
+  color: red;
+}
+
+.text-orange {
+  color: orange;
+}
+
+.text-green {
+  color: green;
+}
+
+.text-blue {
+  color: blue;
+}
+
+.text-purple {
+  color: purple;
+}
+```
+
+```tsx
+<CarmoreIcon icon={'airport'} className={'text-red'} ... />
+<CarmoreIcon icon={'airport'} className={'text-orange'} ... />
+<CarmoreIcon icon={'airport'} className={'text-green'}  ... />
+<CarmoreIcon icon={'airport'} className={'text-blue'}  ... />
+<CarmoreIcon icon={'airport'} className={'text-purple'}  ... />
+```
+
+<br />
+<br />
+
+## 접근성 (a11y)
+
+`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다.
+
+- `role` 의 기본값은 'img' 입니다.
+- `aria-label` 의 기본값은 '공항' 입니다.
+- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다.
+- _(아이콘에 마우스를 올려보세요.)_
+
+<A11yPropsCompareList icon={'airport'} ariaLabels={[undefined, '비행기', '이륙']} />
+
+```tsx
+<CarmoreIcon icon={'airport'} ... /> // 기본값('공항') 적용
+<CarmoreIcon icon={'airport'} aria-label={'비행기'} ... />
+<CarmoreIcon icon={'airport'} aria-label={'이륙'} ... />
+```

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
+
+<br />
+
+<IconProfile icon={'anchor'} />
+
+## 사용법
+
+```tsx
+import { CarmoreIcon } from '@o2-ui/carmore-icon';
+
+// ...
+
+  <CarmoreIcon icon={'anchor'} ... />
+
+// ...
+```
+
+<br />
+<br />
+
+## 크기 설정
+
+아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다.
+
+- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다.
+  - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.)
+- `width` 의 기본값은 '1.5rem' 입니다.
+- `height` 의 기본값은 '1.5rem' 입니다.
+
+<SizePropsCompareList icon={'anchor'} sizes={['1.5rem', 30, '48px', '5rem']} />
+
+```tsx
+<CarmoreIcon icon={'anchor'} ... /> // 기본값('1.5rem') 적용
+<CarmoreIcon icon={'anchor'} width={30} height={30} ... />
+<CarmoreIcon icon={'anchor'} width={'48px'} height={'48px'} ... />
+<CarmoreIcon icon={'anchor'} width={'5rem'} height={'5rem'} ... />
+```
+
+<br />
+<br />
+
+## 색상 변경
+
+`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다.
+
+<ColorPropsCompareList icon={'anchor'} colors={['red', 'orange', 'green', 'blue', 'purple']} />
+
+```css
+.text-red {
+  color: red;
+}
+
+.text-orange {
+  color: orange;
+}
+
+.text-green {
+  color: green;
+}
+
+.text-blue {
+  color: blue;
+}
+
+.text-purple {
+  color: purple;
+}
+```
+
+```tsx
+<CarmoreIcon icon={'anchor'} className={'text-red'} ... />
+<CarmoreIcon icon={'anchor'} className={'text-orange'} ... />
+<CarmoreIcon icon={'anchor'} className={'text-green'}  ... />
+<CarmoreIcon icon={'anchor'} className={'text-blue'}  ... />
+<CarmoreIcon icon={'anchor'} className={'text-purple'}  ... />
+```
+
+<br />
+<br />
+
+## 접근성 (a11y)
+
+`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다.
+
+- `role` 의 기본값은 'img' 입니다.
+- `aria-label` 의 기본값은 '닻' 입니다.
+- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다.
+- _(아이콘에 마우스를 올려보세요.)_
+
+<A11yPropsCompareList icon={'anchor'} ariaLabels={[undefined, '갈고리', '항구']} />
+
+```tsx
+<CarmoreIcon icon={'anchor'} ... /> // 기본값('닻') 적용
+<CarmoreIcon icon={'anchor'} aria-label={'갈고리'} ... />
+<CarmoreIcon icon={'anchor'} aria-label={'항구'} ... />
+```

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
+
+<br />
+
+<IconProfile icon={'bus'} />
+
+## 사용법
+
+```tsx
+import { CarmoreIcon } from '@o2-ui/carmore-icon';
+
+// ...
+
+  <CarmoreIcon icon={'bus'} ... />
+
+// ...
+```
+
+<br />
+<br />
+
+## 크기 설정
+
+아이콘의 크기는 `width` 와 `height` 속성으로 조절할 수 있습니다.
+
+- 숫자를 직접 지정할 수 있으며, 'px', 'rem', '%' 같은 단위가 포함된 문자열도 허용됩니다.
+  - (단, 아이콘의 원래 비율은 고정되어 있어 변경할 수 없습니다.)
+- `width` 의 기본값은 '1.5rem' 입니다.
+- `height` 의 기본값은 '1.5rem' 입니다.
+
+<SizePropsCompareList icon={'bus'} sizes={['1.5rem', 30, '48px', '5rem']} />
+
+```tsx
+<CarmoreIcon icon={'bus'} ... /> // 기본값('1.5rem') 적용
+<CarmoreIcon icon={'bus'} width={30} height={30} ... />
+<CarmoreIcon icon={'bus'} width={'48px'} height={'48px'} ... />
+<CarmoreIcon icon={'bus'} width={'5rem'} height={'5rem'} ... />
+```
+
+<br />
+<br />
+
+## 색상 변경
+
+`className`을 통해 텍스트 색상(color)을 지정하면 아이콘의 색상이 변경됩니다.
+
+<ColorPropsCompareList icon={'bus'} colors={['red', 'orange', 'green', 'blue', 'purple']} />
+
+```css
+.text-red {
+  color: red;
+}
+
+.text-orange {
+  color: orange;
+}
+
+.text-green {
+  color: green;
+}
+
+.text-blue {
+  color: blue;
+}
+
+.text-purple {
+  color: purple;
+}
+```
+
+```tsx
+<CarmoreIcon icon={'bus'} className={'text-red'} ... />
+<CarmoreIcon icon={'bus'} className={'text-orange'} ... />
+<CarmoreIcon icon={'bus'} className={'text-green'}  ... />
+<CarmoreIcon icon={'bus'} className={'text-blue'}  ... />
+<CarmoreIcon icon={'bus'} className={'text-purple'}  ... />
+```
+
+<br />
+<br />
+
+## 접근성 (a11y)
+
+`role`, `aria-label` 등의 속성을 설정하는 것을 권장합니다.
+
+- `role` 의 기본값은 'img' 입니다.
+- `aria-label` 의 기본값은 '버스' 입니다.
+- 기본 접근성 속성이 적용되어 있지만, 필요에 따라 커스터마이징할 수 있습니다.
+- _(아이콘에 마우스를 올려보세요.)_
+
+<A11yPropsCompareList icon={'bus'} ariaLabels={[undefined, '버스 노선', '버스 운영 안내']} />
+
+```tsx
+<CarmoreIcon icon={'bus'} ... /> // 기본값('버스') 적용
+<CarmoreIcon icon={'bus'} aria-label={'버스 노선'} ... />
+<CarmoreIcon icon={'bus'} aria-label={'버스 운영 안내'} ... />
+```