Skip to content

docs(intro): update packages & CDN to redirect to other sections #4286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

docs(intro): update packages & CDN to redirect to other sections #4286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e7dbc5
refactor(DocsCard): iconset shows icons side by side with a plus in b…
brandyscarney Oct 17, 2025
b35e544
docs(intro): update packages & cdn docs to link packages to other guides
brandyscarney Oct 17, 2025
c030630
docs(react): rename adding to existing app file and add redirects
brandyscarney Oct 17, 2025
1817300
style: lint
brandyscarney Oct 17, 2025
456605a
style: ignore iconset in cspell
brandyscarney Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions cspell-wordlist.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ flexbox
frontmatter
fullscreen
geolocation
iconset
interactives
isopen
jank
Expand Down
196 changes: 80 additions & 116 deletions docs/intro/cdn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,156 +1,122 @@
---
title: Ionic Packages
title: Ionic Packages & CDN
sidebar_label: Packages & CDN
---

<head>
<title>Ionic Framework Packages: CDN, Angular, Vue, and React</title>
<title>Ionic Framework Packages: CDN, Angular, Vue, React, and JavaScript</title>
<meta
name="description"
content="View our different packages that can be used to quickly start using Ionic Framework or Ionicons CDN in a test environment, Angular, Vue, React, or none at all."
content="View our different packages that can be used to quickly start using Ionic Framework or Ionicons CDN in a test environment, Angular, Vue, React, or JavaScript."
/>
</head>

Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all.
import DocsCard from '@components/global/DocsCard';
import DocsCards from '@components/global/DocsCards';

## Ionic Framework CDN
Ionic Framework offers npm packages for Angular, React, Vue, and JavaScript, plus CDN links for quick prototyping. Choose your framework below to get started, or use the CDN to test Ionic Framework components in the browser.

Ionic Framework can be included from a CDN for quick testing in a [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor!
## Ionic Angular

It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `<head>` element in an HTML file, or where external assets are included in the online code editor:
Start a new Ionic Angular app or add Ionic to your existing Angular project.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
```
<DocsCards>

With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets).
<DocsCard
header="New Angular Project"
href="../angular/quickstart"
iconset="/icons/logo-angular-icon.png,/icons/guide-quickstart-icon.png"
>
<p>Create a new Ionic Angular app using the Ionic CLI.</p>
</DocsCard>

:::note
This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework.
:::
<DocsCard
header="Existing Angular Project"
href="../angular/add-to-existing"
iconset="/icons/logo-angular-icon.png,/icons/guide-package-icon.png"
>
<p>Add Ionic Angular to an existing Angular project.</p>
</DocsCard>

## Ionic + Angular
</DocsCards>

When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features.
## Ionic React

```shell
npm install @ionic/angular@latest --save
```
Start a new Ionic React app or add Ionic to your existing React project.

Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well.
<DocsCards>

For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature.
<DocsCard
header="New React Project"
href="../react/quickstart"
iconset="/icons/logo-react-icon.png,/icons/guide-quickstart-icon.png"
>
<p>Create a new Ionic React app using the Ionic CLI.</p>
</DocsCard>

```shell
ng add @ionic/angular
```
<DocsCard
header="Existing React Project"
href="../react/add-to-existing"
iconset="/icons/logo-react-icon.png,/icons/guide-package-icon.png"
>
<p>Add Ionic React to an existing React project.</p>
</DocsCard>

This will add the necessary imports to the `@ionic/angular` package as well as add the styles needed.
</DocsCards>

## Ionic + React
## Ionic Vue

To add Ionic Framework to an already existing React project, install the `@ionic/react` and `@ionic/react-router` package.
Start a new Ionic Vue app or add Ionic to your existing Vue project.

```shell
$ npm install @ionic/react
$ npm install @ionic/react-router
```

### CSS
<DocsCards>

To include the necessary CSS in a React project, add the following to the root App component.
<DocsCard
header="New Vue Project"
href="../vue/quickstart"
iconset="/icons/logo-vue-icon.png,/icons/guide-quickstart-icon.png"
>
<p>Create a new Ionic Vue app using the Ionic CLI.</p>
</DocsCard>

```javascript
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
<DocsCard
header="Existing Vue Project"
href="../vue/add-to-existing"
iconset="/icons/logo-vue-icon.png,/icons/guide-package-icon.png"
>
<p>Add Ionic Vue to an existing Vue project.</p>
</DocsCard>

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';
</DocsCards>

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';
```
## Ionic JavaScript

## Ionic + Vue
Start a new Ionic JavaScript app.

To add Ionic Framework to an existing Vue project, install the `@ionic/vue` and `@ionic/vue-router` packages.

```shell
npm install @ionic/vue @ionic/vue-router
```
<DocsCards>

After that, you will need to install the `IonicVue` plugin in your Vue app.
<DocsCard
header="New JavaScript Project"
href="../javascript/quickstart"
iconset="/icons/logo-javascript-icon.png,/icons/guide-quickstart-icon.png"
>
<p>Create a new Ionic JavaScript app using Vite.</p>
</DocsCard>

**main.js**
</DocsCards>

```javascript
import { IonicVue } from '@ionic/vue';

import App from './App.vue';
import router from './router';

const app = createApp(App).use(IonicVue).use(router);

router.isReady().then(() => {
app.mount('#app');
});
```

Be sure to mount your app once `router.isReady()` has resolved.

### Routing

When setting up routing in your Vue app, you will need to import your dependencies from `@ionic/vue-router` instead of `vue-router`.

**router/index.js**

```javascript
import { createRouter, createWebHistory } from '@ionic/vue-router';

const routes = [
// routes go here
];

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});

export default router;
```

### CSS

To include the necessary CSS in a Vue project, add the following to your `main.js` file.
## Ionic Framework CDN

```javascript
/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';
Ionic Framework can be included from a CDN for quick testing in a [StackBlitz](https://stackblitz.com/), [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor!

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';
It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `<head>` element in an HTML file, or where external assets are included in the online code editor:

/* Optional CSS utils that can be commented out */
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';
```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
```

From here, you can learn about how to develop with Ionic Framework in our [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart).
With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets).

## Ionicons CDN

Expand All @@ -161,6 +127,4 @@ Ionicons is packaged by default with the Ionic Framework, so no installation is
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/ionicons/ionicons.js"></script>
```

:::note
See [Ionicons usage](https://ionic.io/ionicons/usage) for more information on using Ionicons.
:::
For more information on using Ionicons, visit the [Ionicons documentation](https://ionic.io/ionicons/usage).
17 changes: 14 additions & 3 deletions ...nic-react-to-an-existing-react-project.md → docs/react/add-to-existing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
# Adding To An Existing React App

This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic.
---
title: Add to Existing React App
sidebar_label: Add to Existing React App
---

<head>
<title>Add Ionic React to Existing Project: Integration Guide</title>
<meta
name="description"
content="Learn how to add Ionic React to your existing React project. Step-by-step guide for integrating Ionic components and features into an existing React application."
/>
</head>

This guide covers how to add Ionic React to an existing React project.

### Using Individual Ionic Components

Expand Down
2 changes: 1 addition & 1 deletion sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ module.exports = {
'react/your-first-app/distribute',
],
},
'react/adding-ionic-react-to-an-existing-react-project',
'react/add-to-existing',
'react/lifecycle',
'react/navigation',
'react/virtual-scroll',
Expand Down
18 changes: 10 additions & 8 deletions src/components/global/DocsCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,16 @@ function DocsCard(props: Props): JSX.Element {
)}
{props.ionicon && <ion-icon name={props.ionicon} className="Card-ionicon"></ion-icon>}
{props.iconset && (
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I searched the repository and iconset was not used anywhere so I stole this property to make my card that shows icon + icon:

Image

<div className="Card-iconset__container">
{props.iconset.split(',').map((icon, index) => (
<img
src={useBaseUrl(icon)}
className={`Card-icon ${index === props.activeIndex ? 'Card-icon-active' : ''}`}
data-index={index}
key={index}
/>
<div className="Card-icon-row">
{props.iconset.split(',').map((icon, index, array) => (
<React.Fragment key={index}>
<img src={useBaseUrl(icon)} className="Card-icon Card-icon-default" />
{index < array.length - 1 && (
<div className="Card-plus-icon">
<span>+</span>
</div>
)}
</React.Fragment>
))}
</div>
)}
Expand Down
23 changes: 11 additions & 12 deletions src/components/global/DocsCard/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,20 +116,19 @@ docs-card[disabled]::after {

.Card-icon-row {
position: relative;
display: flex;
gap: 8px;
}

.Card-iconset__container {
position: relative;
}

.Card-iconset__container .Card-icon {
position: absolute;
opacity: 0;
transition: 0.8s opacity;
}

.Card-iconset__container .Card-icon--active {
opacity: 1;
.Card-plus-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 48px;
color: var(--docs-card-border-c);
font-size: 22px;
font-weight: 600;
}

.Card-ionicon {
Expand Down
6 changes: 5 additions & 1 deletion src/components/global/DocsCards/cards.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ docs-cards {
display: grid;
font-size: 12px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-gap: 1.35rem;
gap: 1.35rem;
}

docs-cards:has(docs-card:only-child) {
grid-template-columns: 1fr 1fr;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is needed so that the JavaScript card does not stretch the entire width of the row.

}

docs-cards > docs-card {
Expand Down
10 changes: 9 additions & 1 deletion vercel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,15 @@
"destination": "/docs/vue/your-first-app/deploying-mobile"
},
{ "source": "/docs/vue/your-first-app/7-live-reload", "destination": "/docs/vue/your-first-app/live-reload" },
{ "source": "/docs/react/testing", "destination": "/docs/react/testing/introduction" }
{ "source": "/docs/react/testing", "destination": "/docs/react/testing/introduction" },
{
"source": "/docs/react/adding-ionic-react-to-an-existing-react-project",
"destination": "/docs/react/add-to-existing"
},
{
"source": "/docs/:version(v7)/react/adding-ionic-react-to-an-existing-react-project",
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not include v6 here as the guide did not exist in v6.

"destination": "/docs/:version/react/add-to-existing"
}
],
"rewrites": [
{ "source": "/docs", "destination": "/" },
Expand Down
17 changes: 14 additions & 3 deletions ...nic-react-to-an-existing-react-project.md → ..._docs/version-v7/react/add-to-existing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
# Adding To An Existing React App

This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic.
---
title: Add to Existing
sidebar_label: Add to Existing
---

<head>
<title>Add Ionic React to Existing Project: Integration Guide</title>
<meta
name="description"
content="Learn how to add Ionic React to your existing React project. Step-by-step guide for integrating Ionic components and features into an existing React application."
/>
</head>

This guide covers how to add Ionic React to an existing React project.

### Using Individual Ionic Components

Expand Down
2 changes: 1 addition & 1 deletion versioned_sidebars/version-v7-sidebars.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
"react/your-first-app/distribute"
]
},
"react/adding-ionic-react-to-an-existing-react-project",
"react/add-to-existing",
"react/lifecycle",
"react/navigation",
"react/virtual-scroll",
Expand Down