diff --git a/NAMING_CONVENTION.md b/NAMING_CONVENTION.md
new file mode 100644
index 00000000..36acbcb1
--- /dev/null
+++ b/NAMING_CONVENTION.md
@@ -0,0 +1,74 @@
+# Naming Convention
+
+## Hierarchy
+
+The foundation of the naming convention in Iconoir is:
+
+```
+[Object]-[Modifier]-[Container]
+```
+
+### [Object]
+
+Contains one or more objects.
+
+### [Modifier]
+
+It's often an additional and unique element added as a secondary object (`-minus`, `-plus`, `-warning`).
+
+### [Container]
+
+A shape used as a container for the object (`-square`, `-circle`).
+If a shape is directly part of an object, it's not considered a container.
+
+\* You could notice a difference between icons such as
+`user-minus` and `minus-square`. The second one looks different
+because in this case the minus symbol is an _[Object]_, followed
+by the _[Container]_.
+
+## Styles
+
+An optional rule is regarding icons style. Iconoir is actually offering Regular and Solid icons. With the latter, icons names end with `-solid`. An example here:
+
+- Regular\: `check-circle`
+- Solid\: `check-circle-solid`
+
+## Object-Oriented Naming
+
+Exceptions apart, icons follow an object-oriented naming and
+should not embed actions in their names.
+
+Examples:
+
+- `user-minus` is correct.
+- `remove-user` would be wrong.
+
+## Physical Actions
+
+Icons that represent a physical action or movement
+can embed that action in their name.
+
+Examples:
+
+- `walking`, `running`, `vehicle-fast`, `crane-lifting` are correct.
+
+## Most-Used Modifiers and Shapes
+
+### Modifiers
+
+`-plus`, `-minus`, `-warning`, `-check`, `-xmark`, `-tag`,
+`-ban`, `-slash`
+
+- `-plus-in` and `minus-in`: Differently from `-plus` and `-minus`, these are used when the icon
+ has a bigger plus or minus icon in the center or inside the main object.
+- `-no-access`: It's regularly used when the icon has a restrict
+ symbol in a corner.
+
+### Shapes
+
+`-square`, `-circle`
+
+## Exceptions
+
+If you spot an icon that is not following any of the rules,
+please open a [new issue](https://github.com/iconoir-icons/iconoir/issues/new/choose) on GitHub.
diff --git a/NAMING_CONVENTIONS.md b/NAMING_CONVENTIONS.md
deleted file mode 100644
index 33c0acd4..00000000
--- a/NAMING_CONVENTIONS.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# Naming Convention
-
-## Hierarchy
-
-The foundation of the naming conventions in Iconoir is:
-```txt
-[Object]-[Modifier]-[Container]
-```
-[Object]
-It contains one or more objects.
-
-[Modifier]
-It's often an additional and unique element
-added as a secondary object (`-minus`, `-plus`, `-warning`).
-
-[Container]
-A shape used as a container for the object (`-square`, `-circle`).
-If a shape is directly part of an object, it's not considered a container.
-
-*You could notice a difference between icons such as
-`user-minus` and `minus-square`. The second one looks different
-because in this case the minus symbol is an [Object], followed
-by the [Container].
-
-## Styles
-
-An optional rule is regarding icons style. Iconoir is actually offering Regular and Solid icons. With the latter, icons names end with `-solid`. An example here:
-```txt
-[Regular] check-circle
-[Solid] check-circle-solid
-```
-
-## Object-oriented naming
-
-Exceptions apart, icons follow an object-oriented naming and
-should not embed actions in their names.
-
-Examples:
-`remove-user` would be wrong. `user-minus` is correct.
-
-## Physical actions
-
-Icons that represent a physical action or movement
-can embed that action in their name.
-
-Examples:
-`walking`, `running`, `vehicle-fast`, `crane-lifting` are correct.
-
-## Most-used modifiers and shapes
-
-Modifiers:
-`-plus`, `-minus`, `-warning`, `-check`, `-xmark`, `-tag`,
-`-ban`, `-slash`.
-
-`-plus-in` and `minus-in`: Differently from `-plus` and `-minus`, these are used when the icon
-has a bigger plus or minus icon in the center or inside the main object.
-
-`-no-access`: It's regularly used when the icon has a restrict
-symbol in a corner.
-
-Shapes:
-`-square`, `-circle`.
-
-## Exceptions
-
-If you spot an icon that is not following any of the rules,
-please open a new #issue on Github.
\ No newline at end of file
diff --git a/README.md b/README.md
index c1c79329..47e60c86 100644
--- a/README.md
+++ b/README.md
@@ -121,4 +121,4 @@ struct ContentView: View {
## License
-[MIT License](./LICENSE)
+[MIT](./LICENSE)
diff --git a/css/README.md b/css/README.md
index bf2f52bb..87f8e126 100644
--- a/css/README.md
+++ b/css/README.md
@@ -19,5 +19,3 @@ The class must always be "iconoir-" and then the name of the icon. You can find
The icons are `display: inline-block` and default to the current font size. You can control this
by adjusting the `::before` styles of the element (which is where the icons are added as a mask).
-
-
diff --git a/docs/framer.md b/docs/framer.md
index 203e0576..6a8ac015 100644
--- a/docs/framer.md
+++ b/docs/framer.md
@@ -5,5 +5,3 @@ Iconoir is happily part of [Framer](https://framer.com).
To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir`.
You can switch between icons from the right sidebar in the editor.
-
-
diff --git a/iconoir.com/components/DocumentationNavigation.tsx b/iconoir.com/components/DocumentationNavigation.tsx
index a29f1a86..936bbed2 100644
--- a/iconoir.com/components/DocumentationNavigation.tsx
+++ b/iconoir.com/components/DocumentationNavigation.tsx
@@ -136,7 +136,7 @@ const HeaderItem = styled.div`
}
`;
const NavigationItem = styled.div<{ $active?: boolean }>`
- padding: 12px 45px 12px 75px;
+ padding: 12px 12px 12px 75px;
transition:
background 0.1s linear,
color 0.1s linear;
@@ -163,7 +163,7 @@ const NavigationItem = styled.div<{ $active?: boolean }>`
font-weight: 700;
}
${media.lg} {
- padding: 12px 45px 12px 65px;
+ padding: 12px 12px 12px 65px;
}
`;
const NavigationItemLabel = styled.span`
diff --git a/iconoir.com/components/MDXRemote.tsx b/iconoir.com/components/MDXRemote.tsx
index 660da578..eac21882 100644
--- a/iconoir.com/components/MDXRemote.tsx
+++ b/iconoir.com/components/MDXRemote.tsx
@@ -1,7 +1,6 @@
import { MDXRemote as CoreMDXRemote, MDXRemoteProps } from 'next-mdx-remote';
-import { SuggestLibrary } from './SuggestLibrary';
import { Table } from './Table';
-import { Body, Code, H1, H2, H3, Pre } from './Typography';
+import { Body, Code, InlineCode, H1, H2, H3, Pre, Li } from './Typography';
export function MDXRemote(props: MDXRemoteProps) {
return (
@@ -16,7 +15,8 @@ export function MDXRemote(props: MDXRemoteProps) {
h2: H2,
h3: H3,
table: Table,
- SuggestLibrary,
+ code: InlineCode,
+ li: Li,
}}
/>
);
diff --git a/iconoir.com/components/Typography.tsx b/iconoir.com/components/Typography.tsx
index cd37b2e5..12fab118 100644
--- a/iconoir.com/components/Typography.tsx
+++ b/iconoir.com/components/Typography.tsx
@@ -47,6 +47,12 @@ export const Heading2 = styled.h2`
font-weight: 700;
`;
+export const InlineCode = styled.span`
+ background: var(--g6);
+ border-radius: 6px;
+ padding: 4px;
+`;
+
export const Code = styled.div`
background: var(--g7);
border: solid 1px var(--g6);
@@ -110,6 +116,14 @@ export const Body = styled.p`
line-height: 30px;
margin: 24px 0;
`;
+
+export const Li = styled.li`
+ font-size: 18px;
+ color: var(--g1);
+ line-height: 30px;
+ margin: 4px 0;
+`;
+
export const CodeElement = styled.code`
&&& {
display: inline-block;
diff --git a/iconoir.com/pages/docs/[...slug].tsx b/iconoir.com/pages/docs/[...slug].tsx
index be73c1dd..76b9bb87 100644
--- a/iconoir.com/pages/docs/[...slug].tsx
+++ b/iconoir.com/pages/docs/[...slug].tsx
@@ -18,6 +18,7 @@ import { ReadOnGitHub } from '../../components/ReadOnGitHub';
import { media } from '../../lib/responsive';
import { SEO } from '../../components/SEO';
import { getHeaderProps } from '../../lib/getHeaderProps';
+import { SuggestLibrary } from '@/components/SuggestLibrary';
interface DocumentationPageProps extends HeaderProps {
source: MDXRemoteSerializeResult;
@@ -45,10 +46,10 @@ export default function DocumentationPage({
- {navigationItem.noReadOnGitHub ||
- !navigationItem.filepath ? null : (
+ {!navigationItem.noReadOnGitHub && navigationItem.filepath && (
)}
+ {navigationItem.suggestLibrary && }
@@ -95,13 +96,17 @@ export const InnerContentContainer = styled.div`
}
`;
-export interface DocumentationItem {
+interface DocumentationItemProps {
+ suggestLibrary?: boolean;
+ noReadOnGitHub?: boolean;
+}
+export interface DocumentationItem extends DocumentationItemProps {
path: string;
filepath?: string;
+ childrenProps?: DocumentationItemProps;
children?: DocumentationItem[];
title: string;
label?: string;
- noReadOnGitHub?: boolean;
skip?: boolean;
}
export function getDocumentationStructure(): DocumentationItem[] {
@@ -117,51 +122,46 @@ export function getDocumentationStructure(): DocumentationItem[] {
title: 'How to contribute',
},
{
- path: 'naming-conventions',
- filepath: 'NAMING_CONVENTIONS.md',
- title: 'Naming Conventions',
+ path: 'naming-convention',
+ filepath: 'NAMING_CONVENTION.md',
+ title: 'Naming Convention',
},
],
},
{
path: 'packages',
title: 'Libraries',
+ childrenProps: { suggestLibrary: true, noReadOnGitHub: true },
children: [
{
path: 'iconoir-react',
filepath: 'packages/iconoir-react/README.md',
title: 'React',
- noReadOnGitHub: true,
},
{
path: 'iconoir-react-native',
filepath: 'packages/iconoir-react-native/README.md',
title: 'React Native',
- noReadOnGitHub: true,
},
{
path: 'iconoir-vue',
filepath: 'packages/iconoir-vue/README.md',
title: 'Vue',
- noReadOnGitHub: true,
},
{
path: 'iconoir-flutter',
filepath: 'packages/iconoir-flutter/README.md',
title: 'Flutter',
- noReadOnGitHub: true,
},
{
path: 'framer',
filepath: 'docs/framer.md',
title: 'Framer',
- noReadOnGitHub: true,
},
{
path: 'css',
filepath: 'css/README.md',
title: 'CSS',
- noReadOnGitHub: true,
},
],
},
@@ -208,6 +208,7 @@ function structureItemsToPaths(
function flattenItems(
items: DocumentationItem[],
prefix?: string[],
+ childrenProps?: DocumentationItemProps,
): DocumentationItem[] {
return items.reduce((acc, item) => {
return [
@@ -215,6 +216,7 @@ function flattenItems(
...(item.filepath
? [
{
+ ...childrenProps,
...item,
path: [...(prefix || []), item.path].filter(Boolean).join('/'),
},
@@ -224,6 +226,7 @@ function flattenItems(
? flattenItems(
item.children,
[...(prefix || []), item.path].filter(Boolean),
+ item.childrenProps,
)
: []),
];
@@ -235,6 +238,8 @@ function itemFromSlug(
slug: string[],
): DocumentationItem {
const flatItems = flattenItems(items);
+
+ console.log(flatItems);
const joinedSlug = slug.filter(Boolean).join('/');
const item = flatItems.find((flatItem) => flatItem.path === joinedSlug);
if (!item)
@@ -260,6 +265,8 @@ function cleanSource(source: string): string {
export async function getStaticProps(context: GetStaticPropsContext) {
const items = getDocumentationStructure();
+ console.log(items);
+
const navigationItem = itemFromSlug(items, context.params!.slug as string[]);
const repositoryRoot = path.join(process.cwd(), '..');
const filepath = path.join(repositoryRoot, navigationItem.filepath!);
diff --git a/packages/iconoir-react/README.md b/packages/iconoir-react/README.md
index 43420977..d8bc222b 100644
--- a/packages/iconoir-react/README.md
+++ b/packages/iconoir-react/README.md
@@ -68,5 +68,3 @@ return (
## Icon names
The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
-
-
diff --git a/packages/iconoir-vue/README.md b/packages/iconoir-vue/README.md
index f86e2383..4bb43783 100644
--- a/packages/iconoir-vue/README.md
+++ b/packages/iconoir-vue/README.md
@@ -91,5 +91,3 @@ import { IconoirProvider, Check } from '@iconoir/vue';
## Icon names
The Vue components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
-
-