From 7fa5ed2cfbed8a51d53ca76d35f5744d16b94cfd Mon Sep 17 00:00:00 2001 From: mrholek Date: Sun, 14 Jul 2024 18:20:40 +0200 Subject: [PATCH] docs: add `CIconSvg` component documentation --- packages/coreui-icons-react | 2 +- packages/docs/content/api/CIconSvg.api.mdx | 15 +++++ packages/docs/content/components/icon.mdx | 69 ++++++++++++++++++++-- packages/docs/package.json | 2 +- 4 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 packages/docs/content/api/CIconSvg.api.mdx diff --git a/packages/coreui-icons-react b/packages/coreui-icons-react index bcbe37d7..aad2d31c 160000 --- a/packages/coreui-icons-react +++ b/packages/coreui-icons-react @@ -1 +1 @@ -Subproject commit bcbe37d75c46bfa18e8c1b3c903d60fe8f0b1222 +Subproject commit aad2d31c3cd8ca4d3ed7457ef02730f60038b6e8 diff --git a/packages/docs/content/api/CIconSvg.api.mdx b/packages/docs/content/api/CIconSvg.api.mdx new file mode 100644 index 00000000..29a8ed9f --- /dev/null +++ b/packages/docs/content/api/CIconSvg.api.mdx @@ -0,0 +1,15 @@ + +```jsx +import { CIconSvg } from '@coreui/icons-react' +// or +import CIconSvg from '@coreui/icons-react/src/CIconSvg' +``` + +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **className** | A string of all className you want applied to the component. | `string` | - | +| **customClassName** | Use for replacing default CIcon component classes. Prop is overriding the 'size' prop. | `string` \| `string[]` | - | +| **height** | The height attribute defines the vertical length of an icon. | `number` | - | +| **size** | Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'. | `'custom'` \| `'custom-size'` \| `'sm'` \| `'lg'` \| `'xl'` \| `'xxl'` \| `'3xl'` \| `'4xl'` \| `'5xl'` \| `'6xl'` \| `'7xl'` \| `'8xl'` \| `'9xl'` | - | +| **title** | Title tag content. | `string` | - | +| **width** | The width attribute defines the horizontal length of an icon. | `number` | - | diff --git a/packages/docs/content/components/icon.mdx b/packages/docs/content/components/icon.mdx index 795072b5..ef56fd5b 100644 --- a/packages/docs/content/components/icon.mdx +++ b/packages/docs/content/components/icon.mdx @@ -15,7 +15,7 @@ import { CRow, CTabContent, CTabPane } from '@coreui/react/src/index' -import CIcon from '@coreui/icons-react' +import {CIcon, CIconSvg} from '@coreui/icons-react/src/index' import { cilList, cilShieldAlt } from '@coreui/icons' import * as icon from '@coreui/icons'; @@ -44,8 +44,8 @@ Import react icons using one of these two options: To use a single react icon, import the `` component and the desired icon(s) from the `@coreui/icons` library. Then, include the `` component in your code and specify the icon prop with the imported icon variable. Additionally, you can set the desired size for the icon using the `size` prop. - - + + ```jsx @@ -108,13 +108,68 @@ Set heights of react icons using size property like size="lg" and size="sm". ```jsx preview - + ``` +### Custom SVG Icons + +The ` component allows you to add custom SVG icons to your application. In case you want to use custom SVG icons, this component provides the flexibility to include bespoke SVG graphics that align with your design requirements. + + + + + + + + + + + + + + +```jsx +import { CIconSvg } from '@coreui/icons-react'; + +... + + + + + + + + + + +... +``` ## Accessibility @@ -317,4 +372,8 @@ So if you need more icons our PRO package will be a great choice for you. ### CIcon -`markdown:CIcon.api.mdx` \ No newline at end of file +`markdown:CIcon.api.mdx` + +### CIconSvg + +`markdown:CIconSvg.api.mdx` \ No newline at end of file diff --git a/packages/docs/package.json b/packages/docs/package.json index 3331d01e..6a04ebf7 100644 --- a/packages/docs/package.json +++ b/packages/docs/package.json @@ -27,7 +27,7 @@ "@coreui/chartjs": "^4.0.0", "@coreui/coreui": "^5.0.2", "@coreui/icons": "^3.0.1", - "@coreui/icons-react": "^2.2.1", + "@coreui/icons-react": "^2.3.0", "@coreui/react-chartjs": "^3.0.0", "@coreui/utils": "^2.0.2", "@docsearch/css": "^3.6.0",