diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index b4def0432..3b90b2180 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -35,16 +35,27 @@ Please see our [Contributor Code of Conduct](./CODE_OF_CONDUCT.md) for informati
3. Clone your fork.
4. Create a new branch from master for your change.
5. Run `npm install` from the root directory to install dependencies for this package.
-6. Run `npm run dev` from the root directory to start a local version of the ionicons site.
+6. [Modify the Icon Component](#modifying-components) if desired.
+7. Or, modify and [preview the site](#preview-site).
-
+#### Preview Component Changes
+
+1. Run `npm start` from the root directory to start a local version of the icon test.
+2. In the browser, navigate to `/src/components` to view the example test.
+3. Modify this test as needed in the `src/components.index.html` file.
+
+#### Preview Site
+
+1. Run `npm run dev` from the root directory to start a local version of the ionicons site.
+2. A browser will open with a local version of the ionicons docs.
+
#### Lint Changes
diff --git a/.gitignore b/.gitignore
index d1dc0b5fb..a3fc624e7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,5 @@ node_modules/
tmp/
dist/
.DS_Store
+
+www/
\ No newline at end of file
diff --git a/package.json b/package.json
index be4d99d51..493ff6dda 100755
--- a/package.json
+++ b/package.json
@@ -19,16 +19,19 @@
"build.icon": "stencil build",
"clean": "node scripts/clean.js",
"copy.tasks": "node scripts/copy-tasks.js",
- "dev": "stencil build --dev --watch --serve --config src/docs/stencil.config.ts",
+ "dev": "npm run start.docs",
"mode.comparison": "node scripts/mode-comparison.js",
"generate": "python scripts/generate.py",
"lint.ts": "tslint --project .",
"lint.ts.fix": "tslint --project . --fix",
+ "start": "npm run start.icon",
+ "start.docs": "stencil build --dev --watch --serve --config src/docs/stencil.config.ts",
+ "start.icon": "stencil build --dev --watch --serve",
"release": "np --any-branch --yolo",
"test": "stencil test --spec"
},
"devDependencies": {
- "@stencil/core": "0.16.1",
+ "@stencil/core": "0.16.4",
"@stencil/router": "0.3.1",
"@stencil/sass": "0.1.1",
"@types/highlight.js": "^9.12.3",
diff --git a/src/components/components.d.ts b/src/components/components.d.ts
index ef9740137..1c97e51a3 100644
--- a/src/components/components.d.ts
+++ b/src/components/components.d.ts
@@ -22,6 +22,10 @@ export namespace Components {
*/
'color'?: string;
/**
+ * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+ */
+ 'flipRtl'?: boolean;
+ /**
* A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
*/
'icon'?: string;
@@ -64,6 +68,10 @@ export namespace Components {
*/
'color'?: string;
/**
+ * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+ */
+ 'flipRtl'?: boolean;
+ /**
* A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
*/
'icon'?: string;
diff --git a/src/components/icon/icon.css b/src/components/icon/icon.css
index be7c22e3e..0dda1f63f 100644
--- a/src/components/icon/icon.css
+++ b/src/components/icon/icon.css
@@ -9,10 +9,31 @@
box-sizing: content-box !important;
}
-:host(.ion-color) {
- color: var(--ion-color-base) !important;
+.icon-inner,
+svg {
+ display: block;
+
+ fill: currentColor;
+ stroke: currentColor;
+
+ height: 100%;
+ width: 100%;
}
+
+/* Icon RTL
+ * -----------------------------------------------------------
+ */
+
+:host(.flip-rtl) .icon-inner {
+ transform: scaleX(-1);
+}
+
+
+/* Icon Sizes
+ * -----------------------------------------------------------
+ */
+
:host(.icon-small) {
font-size: 18px !important;
}
@@ -21,20 +42,15 @@
font-size: 32px !important;
}
-.icon-inner,
-svg {
- display: block;
- fill: currentColor;
- stroke: currentColor;
+/* Icon Colors
+ * -----------------------------------------------------------
+ */
- height: 100%;
- width: 100%;
+:host(.ion-color) {
+ color: var(--ion-color-base) !important;
}
-/* Set iOS Icon Colors */
-/* ------------------- */
-
:host(.ion-color-primary) {
--ion-color-base: var(--ion-color-primary, #3880ff);
}
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 96e20c23f..120f74e8e 100755
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -46,6 +46,11 @@ export class Icon {
*/
@Prop() md?: string;
+ /**
+ * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
+ */
+ @Prop() flipRtl?: boolean;
+
/**
* Specifies which icon to use from the built-in set of icons.
*/
@@ -171,12 +176,16 @@ export class Icon {
return `${this.resourcesUrl}svg/${name}.svg`;
}
+
hostData() {
+ const flipRtl = this.flipRtl || (this.ariaLabel && this.ariaLabel.indexOf('arrow') > -1 && this.flipRtl !== false);
+
return {
'role': 'img',
class: {
...createColorClasses(this.color),
[`icon-${this.size}`]: !!this.size,
+ 'flip-rtl': flipRtl && hostContext('[dir=rtl]', this.el)
}
};
}
@@ -265,3 +274,7 @@ function createColorClasses(color: string | undefined) {
[`ion-color-${color}`]: true
} : null;
}
+
+function hostContext(selector: string, el: HTMLElement): boolean {
+ return el.closest(selector) !== null;
+}
diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md
index 5bc5b22ae..5a59dbd62 100644
--- a/src/components/icon/readme.md
+++ b/src/components/icon/readme.md
@@ -7,106 +7,19 @@
## Properties
-#### ariaLabel
-
-string
-
-Specifies the label to use for accessibility. Defaults to the icon name.
-
-
-#### color
-
-string
-
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
-
-
-#### icon
-
-string
-
-A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property.
-
-
-#### ios
-
-string
-
-Specifies which icon to use on `ios` mode.
-
-
-#### md
-
-string
-
-Specifies which icon to use on `md` mode.
-
-
-#### name
-
-string
-
-Specifies which icon to use. The appropriate icon will be used based on the mode.
-For more information, see [Ionicons](/docs/ionicons/).
-
-
-#### size
-
-string
-
-The size of the icon.
-Available options are: `"small"` and `"large"`.
-
-
-## Attributes
-
-#### aria-label
-
-string
-
-Specifies the label to use for accessibility. Defaults to the icon name.
-
-
-#### color
-
-string
-
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
-
-
-#### ios
-
-string
-
-Specifies which icon to use on `ios` mode.
-
-
-#### md
-
-string
-
-Specifies which icon to use on `md` mode.
-
-
-#### name
-
-string
-
-Specifies which icon to use. The appropriate icon will be used based on the mode.
-For more information, see [Ionicons](/docs/ionicons/).
-
-
-#### size
-
-string
-
-The size of the icon.
-Available options are: `"small"` and `"large"`.
-
+| Property | Attribute | Description | Type | Default |
+| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- |
+| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name. | `string \| undefined` | `undefined` |
+| `color` | `color` | The color to use for the background of the item. | `string \| undefined` | `undefined` |
+| `flipRtl` | `flip-rtl` | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`. | `boolean \| undefined` | `undefined` |
+| `icon` | `icon` | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `string \| undefined` | `undefined` |
+| `ios` | `ios` | Specifies which icon to use on `ios` mode. | `string \| undefined` | `undefined` |
+| `lazy` | `lazy` | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`. | `boolean` | `false` |
+| `md` | `md` | Specifies which icon to use on `md` mode. | `string \| undefined` | `undefined` |
+| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `"ios" \| "md" \| undefined` | `undefined` |
+| `name` | `name` | Specifies which icon to use from the built-in set of icons. | `string \| undefined` | `undefined` |
+| `size` | `size` | The size of the icon. Available options are: `"small"` and `"large"`. | `string \| undefined` | `undefined` |
+| `src` | `src` | Specifies the exact `src` of an SVG file to use. | `string \| undefined` | `undefined` |
----------------------------------------------
diff --git a/src/components/index.html b/src/components/index.html
new file mode 100644
index 000000000..6b3938362
--- /dev/null
+++ b/src/components/index.html
@@ -0,0 +1,114 @@
+
+
+
+
+
+ Ionicons Icon Component
+
+
+
+
+
+ Ionicons
+
+ Mode: default (md)
+
+
+
+
+
+
+
+
+
+
+ Mode: ios
+
+
+
+
+
+
+
+
+
+
+ Colors
+
+
+
+
+
+
+
+
+
+
+ Logos
+
+
+
+
+
+
+
+
+
+
+ Logos: colors
+
+
+
+
+
+
+
+
+
+
+ RTL
+
+ Default: Non-arrows
+
+
+
+
+
+ Flip: Non-arrows
+
+
+
+
+
+ Auto Flip: arrows
+
+
+
+
+
+ Un-flip: arrows
+
+
+
+
+
+
+
+
diff --git a/stencil.config.ts b/stencil.config.ts
index 3860065e1..6e09c712d 100755
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -7,6 +7,14 @@ export const config: Config = {
{
type: 'dist',
dir: 'dist'
+ },
+ { type: 'docs' },
+ { type: 'www' }
+ ],
+ copy: [
+ {
+ src: '../svg/',
+ dest: './build/ionicons/svg/'
}
]
};