diff --git a/README.md b/README.md index e6ee2a7..01b6c91 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,6 @@ Inside AstroWind template, you'll see the following folders and files: | | └── ... │ ├── components/ │ │ ├── core/ -| | ├── icons/ | | └── widgets/ | | ├── Header.astro | | ├── Footer.astro diff --git a/package.json b/package.json index 09f6e4a..cec3300 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@astrojs/tailwind": "^1.0.0", "@tailwindcss/typography": "^0.5.4", "astro": "^1.0.0", + "astro-icon": "^0.7.3", "prettier": "^2.7.1", "prettier-plugin-astro": "^0.5.0", "reading-time": "^1.5.0", diff --git a/src/assets/styles/base.css b/src/assets/styles/base.css index 7e3622a..442e39e 100644 --- a/src/assets/styles/base.css +++ b/src/assets/styles/base.css @@ -6,4 +6,12 @@ .btn { @apply inline-flex items-center justify-center rounded border border-transparent font-medium text-center text-base leading-snug transition py-3 px-6 shadow-lg ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2; } +} + +[astro-icon] > * { + stroke-width: 1.5; +} + +[astro-icon].icon-bold > * { + stroke-width: 2; } \ No newline at end of file diff --git a/src/components/icons/IconArrowDownRight.astro b/src/components/icons/IconArrowDownRight.astro deleted file mode 100644 index 33da750..0000000 --- a/src/components/icons/IconArrowDownRight.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconArrowRight.astro b/src/components/icons/IconArrowRight.astro deleted file mode 100644 index 8c689ee..0000000 --- a/src/components/icons/IconArrowRight.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - - diff --git a/src/components/icons/IconFacebook.astro b/src/components/icons/IconFacebook.astro deleted file mode 100644 index 0731097..0000000 --- a/src/components/icons/IconFacebook.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - diff --git a/src/components/icons/IconGithub.astro b/src/components/icons/IconGithub.astro deleted file mode 100644 index 01b51a0..0000000 --- a/src/components/icons/IconGithub.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconInstagram.astro b/src/components/icons/IconInstagram.astro deleted file mode 100644 index 78f324c..0000000 --- a/src/components/icons/IconInstagram.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - - diff --git a/src/components/icons/IconMenu.astro b/src/components/icons/IconMenu.astro deleted file mode 100644 index bc56d89..0000000 --- a/src/components/icons/IconMenu.astro +++ /dev/null @@ -1,20 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconRSS.astro b/src/components/icons/IconRSS.astro deleted file mode 100644 index 5b9bc17..0000000 --- a/src/components/icons/IconRSS.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - - diff --git a/src/components/icons/IconSun.astro b/src/components/icons/IconSun.astro deleted file mode 100644 index 2488688..0000000 --- a/src/components/icons/IconSun.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/IconTwitter.astro b/src/components/icons/IconTwitter.astro deleted file mode 100644 index 413ce73..0000000 --- a/src/components/icons/IconTwitter.astro +++ /dev/null @@ -1,22 +0,0 @@ ---- -const { class: className = "w-5 h-5" } = Astro.props; ---- - - - - - - diff --git a/src/components/icons/index.js b/src/components/icons/index.js deleted file mode 100644 index 3c0deeb..0000000 --- a/src/components/icons/index.js +++ /dev/null @@ -1,21 +0,0 @@ -import IconSun from "./IconSun.astro"; -import IconGithub from "./IconGithub.astro"; -import IconTwitter from "./IconTwitter.astro"; -import IconFacebook from "./IconFacebook.astro"; -import IconInstagram from "./IconInstagram.astro"; -import IconArrowRight from "./IconArrowRight.astro"; -import IconMenu from "./IconMenu.astro"; -import IconArrowDownRight from "./IconArrowDownRight.astro"; -import IconRSS from "./IconRSS.astro"; - -export { - IconSun, - IconGithub, - IconTwitter, - IconFacebook, - IconInstagram, - IconArrowRight, - IconMenu, - IconArrowDownRight, - IconRSS, -}; diff --git a/src/components/widgets/BasicFAQs.astro b/src/components/widgets/BasicFAQs.astro index 643ad55..cb4db4b 100644 --- a/src/components/widgets/BasicFAQs.astro +++ b/src/components/widgets/BasicFAQs.astro @@ -1,5 +1,5 @@ --- -import { IconArrowDownRight } from "~/components/icons"; +import { Icon } from "astro-icon"; const {} = Astro.props; --- @@ -18,7 +18,10 @@ const {} = Astro.props;

- + What do I need to start?

@@ -32,7 +35,10 @@ const {} = Astro.props;

- + How to install the Astro + Tailwind CSS template?

@@ -49,7 +55,10 @@ const {} = Astro.props;

- + What's something that you completely don't understand?

@@ -62,7 +71,10 @@ const {} = Astro.props;

- + What's an example of when you changed your mind?

@@ -74,7 +86,10 @@ const {} = Astro.props;

- + What is something that you would really like to try again?

@@ -88,7 +103,10 @@ const {} = Astro.props;

- + If you could only ask one question to each person you meet, what would that question be?

diff --git a/src/components/widgets/BasicFeatures.astro b/src/components/widgets/BasicFeatures.astro index a0355c3..20f7fe2 100644 --- a/src/components/widgets/BasicFeatures.astro +++ b/src/components/widgets/BasicFeatures.astro @@ -1,145 +1,111 @@ --- +import { Icon } from "astro-icon"; const {} = Astro.props; ---
- +
-

Components

-

Most used widgets

-

- Provides frequently used components for building websites using Tailwind CSS +

+ Components +

+

+ Most used widgets +

+

+ Provides frequently used components for building websites using + Tailwind CSS

-
+
- - - - - - - - - - + +
Headers

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore.

- - - - - - - - - - +
Footers

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore.

- - - - - - - - - - +
Features

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore.

- - - - - - - - - - +
Call-to-Action

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore.

- - - - - - - - - - +
Pricing

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore.

- - - - - - - - - - +
Testimonial

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore.

diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro index 21ecf77..6d9115d 100644 --- a/src/components/widgets/Footer.astro +++ b/src/components/widgets/Footer.astro @@ -1,11 +1,6 @@ --- -import { - IconTwitter, - IconInstagram, - IconFacebook, - IconArrowRight, - IconRSS, -} from "~/components/icons"; +import { Icon } from "astro-icon"; + const {} = Astro.props; --- @@ -186,7 +181,8 @@ const {} = Astro.props; class="absolute inset-0 right-auto w-px -ml-px my-2 bg-gray-300 dark:bg-slate-600" aria-hidden="true"> - @@ -204,7 +200,7 @@ const {} = Astro.props; aria-label="Twitter" href="#" > - +
  • @@ -213,7 +209,7 @@ const {} = Astro.props; aria-label="Instagram" href="#" > - +
  • @@ -222,7 +218,7 @@ const {} = Astro.props; aria-label="Facebook" href="#" > - +
  • @@ -231,7 +227,7 @@ const {} = Astro.props; aria-label="Twitter" href="/rss.xml" > - +
    • diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro index eed0b94..56612d7 100644 --- a/src/components/widgets/Header.astro +++ b/src/components/widgets/Header.astro @@ -1,6 +1,7 @@ --- -import { IconSun, IconGithub, IconMenu, IconRSS } from "~/components/icons"; +import { Icon } from "astro-icon"; import Logo from "~/components/widgets/Logo.astro"; + const {} = Astro.props; --- @@ -21,14 +22,14 @@ const {} = Astro.props; aria-label="Toggle between Dark and Light mode" data-aw-toggle-color-scheme > - +
    @@ -80,21 +81,21 @@ const {} = Astro.props; aria-label="Toggle between Dark and Light mode" data-aw-toggle-color-scheme > - + - + - +
    diff --git a/src/components/widgets/StepsLeft.astro b/src/components/widgets/StepsLeft.astro index faf03cf..598af18 100644 --- a/src/components/widgets/StepsLeft.astro +++ b/src/components/widgets/StepsLeft.astro @@ -1,5 +1,7 @@ --- +import { Icon } from "astro-icon"; import Picture from "~/components/core/Picture.astro"; + const {} = Astro.props; --- @@ -12,24 +14,10 @@ const {} = Astro.props;
    - - - - - +
    @@ -52,24 +40,10 @@ const {} = Astro.props;
    - - - - - +
    @@ -91,24 +65,10 @@ const {} = Astro.props;
    - - - - - +
    @@ -130,21 +90,10 @@ const {} = Astro.props;
    - - - - +