mirror of
https://github.com/iconoir-icons/iconoir
synced 2024-06-09 09:22:24 +02:00
Naming convention & few website enhancements
This commit is contained in:
parent
6751f840ab
commit
146b5e41c0
74
NAMING_CONVENTION.md
Normal file
74
NAMING_CONVENTION.md
Normal file
|
@ -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.
|
|
@ -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.
|
|
|
@ -121,4 +121,4 @@ struct ContentView: View {
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[MIT License](./LICENSE)
|
[MIT](./LICENSE)
|
||||||
|
|
|
@ -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
|
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).
|
by adjusting the `::before` styles of the element (which is where the icons are added as a mask).
|
||||||
|
|
||||||
<SuggestLibrary />
|
|
||||||
|
|
|
@ -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`.
|
To start using the icons: On the top menu, `Insert` > `Graphics` > `Iconoir`.
|
||||||
|
|
||||||
You can switch between icons from the right sidebar in the editor.
|
You can switch between icons from the right sidebar in the editor.
|
||||||
|
|
||||||
<SuggestLibrary />
|
|
||||||
|
|
|
@ -136,7 +136,7 @@ const HeaderItem = styled.div`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const NavigationItem = styled.div<{ $active?: boolean }>`
|
const NavigationItem = styled.div<{ $active?: boolean }>`
|
||||||
padding: 12px 45px 12px 75px;
|
padding: 12px 12px 12px 75px;
|
||||||
transition:
|
transition:
|
||||||
background 0.1s linear,
|
background 0.1s linear,
|
||||||
color 0.1s linear;
|
color 0.1s linear;
|
||||||
|
@ -163,7 +163,7 @@ const NavigationItem = styled.div<{ $active?: boolean }>`
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
${media.lg} {
|
${media.lg} {
|
||||||
padding: 12px 45px 12px 65px;
|
padding: 12px 12px 12px 65px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const NavigationItemLabel = styled.span`
|
const NavigationItemLabel = styled.span`
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import { MDXRemote as CoreMDXRemote, MDXRemoteProps } from 'next-mdx-remote';
|
import { MDXRemote as CoreMDXRemote, MDXRemoteProps } from 'next-mdx-remote';
|
||||||
import { SuggestLibrary } from './SuggestLibrary';
|
|
||||||
import { Table } from './Table';
|
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) {
|
export function MDXRemote(props: MDXRemoteProps) {
|
||||||
return (
|
return (
|
||||||
|
@ -16,7 +15,8 @@ export function MDXRemote(props: MDXRemoteProps) {
|
||||||
h2: H2,
|
h2: H2,
|
||||||
h3: H3,
|
h3: H3,
|
||||||
table: Table,
|
table: Table,
|
||||||
SuggestLibrary,
|
code: InlineCode,
|
||||||
|
li: Li,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
|
@ -47,6 +47,12 @@ export const Heading2 = styled.h2`
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const InlineCode = styled.span`
|
||||||
|
background: var(--g6);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
export const Code = styled.div`
|
export const Code = styled.div`
|
||||||
background: var(--g7);
|
background: var(--g7);
|
||||||
border: solid 1px var(--g6);
|
border: solid 1px var(--g6);
|
||||||
|
@ -110,6 +116,14 @@ export const Body = styled.p`
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
margin: 24px 0;
|
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`
|
export const CodeElement = styled.code`
|
||||||
&&& {
|
&&& {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -18,6 +18,7 @@ import { ReadOnGitHub } from '../../components/ReadOnGitHub';
|
||||||
import { media } from '../../lib/responsive';
|
import { media } from '../../lib/responsive';
|
||||||
import { SEO } from '../../components/SEO';
|
import { SEO } from '../../components/SEO';
|
||||||
import { getHeaderProps } from '../../lib/getHeaderProps';
|
import { getHeaderProps } from '../../lib/getHeaderProps';
|
||||||
|
import { SuggestLibrary } from '@/components/SuggestLibrary';
|
||||||
|
|
||||||
interface DocumentationPageProps extends HeaderProps {
|
interface DocumentationPageProps extends HeaderProps {
|
||||||
source: MDXRemoteSerializeResult;
|
source: MDXRemoteSerializeResult;
|
||||||
|
@ -45,10 +46,10 @@ export default function DocumentationPage({
|
||||||
<ContentContainer>
|
<ContentContainer>
|
||||||
<InnerContentContainer>
|
<InnerContentContainer>
|
||||||
<MDXRemote {...source} />
|
<MDXRemote {...source} />
|
||||||
{navigationItem.noReadOnGitHub ||
|
{!navigationItem.noReadOnGitHub && navigationItem.filepath && (
|
||||||
!navigationItem.filepath ? null : (
|
|
||||||
<ReadOnGitHub path={navigationItem.filepath} />
|
<ReadOnGitHub path={navigationItem.filepath} />
|
||||||
)}
|
)}
|
||||||
|
{navigationItem.suggestLibrary && <SuggestLibrary />}
|
||||||
</InnerContentContainer>
|
</InnerContentContainer>
|
||||||
</ContentContainer>
|
</ContentContainer>
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -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;
|
path: string;
|
||||||
filepath?: string;
|
filepath?: string;
|
||||||
|
childrenProps?: DocumentationItemProps;
|
||||||
children?: DocumentationItem[];
|
children?: DocumentationItem[];
|
||||||
title: string;
|
title: string;
|
||||||
label?: string;
|
label?: string;
|
||||||
noReadOnGitHub?: boolean;
|
|
||||||
skip?: boolean;
|
skip?: boolean;
|
||||||
}
|
}
|
||||||
export function getDocumentationStructure(): DocumentationItem[] {
|
export function getDocumentationStructure(): DocumentationItem[] {
|
||||||
|
@ -117,51 +122,46 @@ export function getDocumentationStructure(): DocumentationItem[] {
|
||||||
title: 'How to contribute',
|
title: 'How to contribute',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'naming-conventions',
|
path: 'naming-convention',
|
||||||
filepath: 'NAMING_CONVENTIONS.md',
|
filepath: 'NAMING_CONVENTION.md',
|
||||||
title: 'Naming Conventions',
|
title: 'Naming Convention',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'packages',
|
path: 'packages',
|
||||||
title: 'Libraries',
|
title: 'Libraries',
|
||||||
|
childrenProps: { suggestLibrary: true, noReadOnGitHub: true },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'iconoir-react',
|
path: 'iconoir-react',
|
||||||
filepath: 'packages/iconoir-react/README.md',
|
filepath: 'packages/iconoir-react/README.md',
|
||||||
title: 'React',
|
title: 'React',
|
||||||
noReadOnGitHub: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'iconoir-react-native',
|
path: 'iconoir-react-native',
|
||||||
filepath: 'packages/iconoir-react-native/README.md',
|
filepath: 'packages/iconoir-react-native/README.md',
|
||||||
title: 'React Native',
|
title: 'React Native',
|
||||||
noReadOnGitHub: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'iconoir-vue',
|
path: 'iconoir-vue',
|
||||||
filepath: 'packages/iconoir-vue/README.md',
|
filepath: 'packages/iconoir-vue/README.md',
|
||||||
title: 'Vue',
|
title: 'Vue',
|
||||||
noReadOnGitHub: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'iconoir-flutter',
|
path: 'iconoir-flutter',
|
||||||
filepath: 'packages/iconoir-flutter/README.md',
|
filepath: 'packages/iconoir-flutter/README.md',
|
||||||
title: 'Flutter',
|
title: 'Flutter',
|
||||||
noReadOnGitHub: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'framer',
|
path: 'framer',
|
||||||
filepath: 'docs/framer.md',
|
filepath: 'docs/framer.md',
|
||||||
title: 'Framer',
|
title: 'Framer',
|
||||||
noReadOnGitHub: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'css',
|
path: 'css',
|
||||||
filepath: 'css/README.md',
|
filepath: 'css/README.md',
|
||||||
title: 'CSS',
|
title: 'CSS',
|
||||||
noReadOnGitHub: true,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -208,6 +208,7 @@ function structureItemsToPaths(
|
||||||
function flattenItems(
|
function flattenItems(
|
||||||
items: DocumentationItem[],
|
items: DocumentationItem[],
|
||||||
prefix?: string[],
|
prefix?: string[],
|
||||||
|
childrenProps?: DocumentationItemProps,
|
||||||
): DocumentationItem[] {
|
): DocumentationItem[] {
|
||||||
return items.reduce<DocumentationItem[]>((acc, item) => {
|
return items.reduce<DocumentationItem[]>((acc, item) => {
|
||||||
return [
|
return [
|
||||||
|
@ -215,6 +216,7 @@ function flattenItems(
|
||||||
...(item.filepath
|
...(item.filepath
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
|
...childrenProps,
|
||||||
...item,
|
...item,
|
||||||
path: [...(prefix || []), item.path].filter(Boolean).join('/'),
|
path: [...(prefix || []), item.path].filter(Boolean).join('/'),
|
||||||
},
|
},
|
||||||
|
@ -224,6 +226,7 @@ function flattenItems(
|
||||||
? flattenItems(
|
? flattenItems(
|
||||||
item.children,
|
item.children,
|
||||||
[...(prefix || []), item.path].filter(Boolean),
|
[...(prefix || []), item.path].filter(Boolean),
|
||||||
|
item.childrenProps,
|
||||||
)
|
)
|
||||||
: []),
|
: []),
|
||||||
];
|
];
|
||||||
|
@ -235,6 +238,8 @@ function itemFromSlug(
|
||||||
slug: string[],
|
slug: string[],
|
||||||
): DocumentationItem {
|
): DocumentationItem {
|
||||||
const flatItems = flattenItems(items);
|
const flatItems = flattenItems(items);
|
||||||
|
|
||||||
|
console.log(flatItems);
|
||||||
const joinedSlug = slug.filter(Boolean).join('/');
|
const joinedSlug = slug.filter(Boolean).join('/');
|
||||||
const item = flatItems.find((flatItem) => flatItem.path === joinedSlug);
|
const item = flatItems.find((flatItem) => flatItem.path === joinedSlug);
|
||||||
if (!item)
|
if (!item)
|
||||||
|
@ -260,6 +265,8 @@ function cleanSource(source: string): string {
|
||||||
|
|
||||||
export async function getStaticProps(context: GetStaticPropsContext) {
|
export async function getStaticProps(context: GetStaticPropsContext) {
|
||||||
const items = getDocumentationStructure();
|
const items = getDocumentationStructure();
|
||||||
|
console.log(items);
|
||||||
|
|
||||||
const navigationItem = itemFromSlug(items, context.params!.slug as string[]);
|
const navigationItem = itemFromSlug(items, context.params!.slug as string[]);
|
||||||
const repositoryRoot = path.join(process.cwd(), '..');
|
const repositoryRoot = path.join(process.cwd(), '..');
|
||||||
const filepath = path.join(repositoryRoot, navigationItem.filepath!);
|
const filepath = path.join(repositoryRoot, navigationItem.filepath!);
|
||||||
|
|
|
@ -68,5 +68,3 @@ return (
|
||||||
## Icon names
|
## Icon names
|
||||||
|
|
||||||
The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
|
The React components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
|
||||||
|
|
||||||
<SuggestLibrary />
|
|
||||||
|
|
|
@ -91,5 +91,3 @@ import { IconoirProvider, Check } from '@iconoir/vue';
|
||||||
## Icon names
|
## Icon names
|
||||||
|
|
||||||
The Vue components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
|
The Vue components are named as PascalCase variations of their reference names (i.e. `airplane-helix-45deg` becomes `AirplaneHelix45deg`).
|
||||||
|
|
||||||
<SuggestLibrary />
|
|
||||||
|
|
Loading…
Reference in a new issue