vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Custom Icon page added

pull/3976/head
Tuğçe Küçükoğlu 2023-04-18 17:58:46 +03:00
parent 949f7e94d7
commit 8875bf96fb
8 changed files with 165 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/menu/menu.json
View File

@ -455,9 +455,18 @@
"to": "/uikit" "to": "/uikit"
}, },
{ {
"name": "PrimeIcons", "name": "Icons",
"icon": "pi pi-eye", "icon": "pi pi-eye",
"to": "/icons" "children": [
{
"name": "Prime Icons",
"to": "/icons"
},
{
"name": "Custom Icons",
"to": "/customicons"
}
]
}, },
{ {
"name": "Templates", "name": "Templates",

23
doc/customicons/FontAwesomeDoc.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Dropdown>
<template #dropdownicon>
<i class="fa-light fa-chevron-down"></i>
</template>
</Dropdown>`
}
};
}
};
</script>

23
doc/customicons/ImageDoc.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Any time of image can be used as an icon.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Dropdown>
<template #dropdownicon>
<img alt="dropdown icon" src="/assets/icons/arrow_down.png">
</template>
</Dropdown>`
}
};
}
};
</script>

23
doc/customicons/MaterialDoc.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<DocSectionText v-bind="$attrs">
<p><a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Dropdown>
<template #dropdownicon>
<span class="material-icons">arrow_drop_down</span>
</template>
</Dropdown>`
}
};
}
};
</script>

27
doc/customicons/SVGDoc.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<DocSectionText v-bind="$attrs">
<p>Inline SVGs are embedded inside the dom.</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `
<Dropdown>
<template #dropdownicon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="chevron-down">
<path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
</g>
</svg>
</template>
</Dropdown>`
}
};
}
};
</script>

2
doc/icons/ImportDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>CSS file of the icon library needs to be imported in your application.</p> <p>CSS file of the icon library needs to be imported in <i>styles.scss</i> of your application.</p>
</DocSectionText> </DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz /> <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template> </template>

55
pages/customicons/index.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<div>
<Head>
<Title>Vue Icon Library - PrimeVue</Title>
<Meta name="description" content="PrimeVue components can be used with any icon library using the templating features." />
</Head>
<div class="doc">
<div class="doc-main">
<div class="doc-intro">
<h1>Custom Icons</h1>
<p>PrimeVue components can be used with any icon library using the templating features.</p>
</div>
<DocSections :docs="docs" />
</div>
<DocSectionNav :docs="docs" />
</div>
</div>
</template>
<script>
import FontAwesomeDoc from '@/doc/customicons/FontAwesomeDoc.vue';
import ImageDoc from '@/doc/customicons/ImageDoc.vue';
import MaterialDoc from '@/doc/customicons/MaterialDoc.vue';
import SVGDoc from '@/doc/customicons/SVGDoc.vue';
export default {
data() {
return {
docs: [
{
id: 'material',
label: 'Material',
component: MaterialDoc
},
{
id: 'fontawesome',
label: 'FontAwesome',
component: FontAwesomeDoc
},
{
id: 'svg',
label: 'SVG',
component: SVGDoc
},
{
id: 'image',
label: 'Image',
component: ImageDoc
}
]
};
}
};
</script>

4
pages/icons/index.vue
View File

@ -2,7 +2,7 @@
<div> <div>
<Head> <Head>
<Title>Vue Icon Library - PrimeVue</Title> <Title>Vue Icon Library - PrimeVue</Title>
<Meta name="description" content="PrimeVue components internally use PrimeIcons library." /> <Meta name="description" content="PrimeIcons is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating." />
</Head> </Head>
<div class="doc"> <div class="doc">
@ -11,7 +11,7 @@
<h1>Icons</h1> <h1>Icons</h1>
<p> <p>
<a href="https://github.com/primefaces/primeicons" class="text-primary hover:underline font-semibold"> PrimeIcons </a> <a href="https://github.com/primefaces/primeicons" class="text-primary hover:underline font-semibold"> PrimeIcons </a>
is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeVue components can use any icon with templating.
</p> </p>
</div> </div>
<DocSections :docs="docs" /> <DocSections :docs="docs" />