mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set better icons

Browse Source
This commit is contained in:
prototypa
2022-11-06 17:17:29 -05:00
parent 9ee6488093
commit 9746bf8a20
1 changed files with 10 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/widgets/Features2.astro
View File

@ -1,20 +1,25 @@
--- ---
import { Icon } from 'astro-icon';
const items = [ const items = [
[ [
{ {
title: 'Integration with Tailwind CSS', title: 'Integration with Tailwind CSS',
description: description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: "tabler:brand-tailwind"
}, },
{ {
title: 'Ready-to-use Components', title: 'Ready-to-use Components',
description: description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: "tabler:components"
}, },
{ {
title: 'Best Practices', title: 'Best Practices',
description: description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: "tabler:list-check"
}, },
], ],
[ [
@ -22,16 +27,19 @@ const items = [
title: 'Excellent Page Speed', title: 'Excellent Page Speed',
description: description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: "tabler:rocket"
}, },
{ {
title: 'Frequently updated', title: 'Frequently updated',
description: description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: "tabler:arrows-right-left"
}, },
{ {
title: 'Open to new ideas and contributions', title: 'Open to new ideas and contributions',
description: description:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, quam nec venenatis lobortis, mi risus tempus nulla.',
icon: "tabler:ballon"
}, },
], ],
]; ];
@ -56,22 +64,11 @@ const items = [
{ {
items.map((subitems) => ( items.map((subitems) => (
<div class="space-y-8 sm:px-8"> <div class="space-y-8 sm:px-8">
{subitems.map(({ title, description }) => ( {subitems.map(({ title, description, icon }) => (
<div class="flex flex-row max-w-md"> <div class="flex flex-row max-w-md">
<div class="mb-4 mr-4"> <div class="mb-4 mr-4">
<div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500"> <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-500">
<svg class="w-12 h-12 p-0.5" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"> {icon && <Icon name={icon} class="w-5 h-5 text-white" />}
<g fill="none" fill-rule="evenodd">
<rect class="fill-current text-primary-600" width="64" height="64" rx="32" />
<g stroke-linecap="square" stroke-width="2">
<path class="stroke-current text-white" d="M20.571 20.571h13.714v17.143H20.571z" />
<path
class="stroke-current text-primary-300"
d="M38.858 26.993l6.397 1.73-4.473 16.549-13.24-3.58"
/>
</g>
</g>
</svg>
</div> </div>
</div> </div>
<div> <div>