Custom Icon page added
Tuğçe Küçükoğlu
parent
949f7e94d7
commit
8875bf96fb
|
|
@ -455,10 +455,19 @@
|
|||
"to": "/uikit"
|
||||
},
|
||||
{
|
||||
"name": "PrimeIcons",
|
||||
"name": "Icons",
|
||||
"icon": "pi pi-eye",
|
||||
"children": [
|
||||
{
|
||||
"name": "Prime Icons",
|
||||
"to": "/icons"
|
||||
},
|
||||
{
|
||||
"name": "Custom Icons",
|
||||
"to": "/customicons"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Templates",
|
||||
"icon": "pi pi-star",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div>
|
||||
<Head>
|
||||
<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>
|
||||
|
||||
<div class="doc">
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<h1>Icons</h1>
|
||||
<p>
|
||||
<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>
|
||||
</div>
|
||||
<DocSections :docs="docs" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue