mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-11-29 17:58:08 +08:00
feat(icon): introduce-el-icons-into-ep (#2766)
- Add @element-plus/icons as dependency. - Update el-icon. - Update icon.md for all languages.
This commit is contained in:
jeremywu
GitHub
parent
a4275b94f2
commit
a7b4b61dc1
@ -140,6 +140,7 @@
|
||||
"homepage": "https://element-plus.org",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "^0.0.11",
|
||||
"@popperjs/core": "^2.4.4",
|
||||
"async-validator": "^3.4.0",
|
||||
"dayjs": "1.x",
|
||||
|
||||
@ -5,9 +5,15 @@ describe('Icon.vue', () => {
|
||||
test('render', () => {
|
||||
const wrapper = mount(Icon, {
|
||||
props: {
|
||||
name: 'search',
|
||||
color: '#000000',
|
||||
size: 18,
|
||||
},
|
||||
})
|
||||
expect(wrapper.classes()).toContain('el-icon-search')
|
||||
expect(wrapper.element.getAttribute('style')).toContain(
|
||||
`--color: #000000`,
|
||||
)
|
||||
expect(wrapper.element.getAttribute('style')).toContain(
|
||||
`--font-size: 18px`,
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,17 +1,38 @@
|
||||
<template>
|
||||
<i :class="`el-icon-${name}`"></i>
|
||||
<i
|
||||
class="el-icon"
|
||||
:style="style"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<slot></slot>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
<script lang='ts'>
|
||||
import { defineComponent, computed } from 'vue'
|
||||
import type { CSSProperties } from 'vue'
|
||||
export default defineComponent({
|
||||
name: 'ElIcon',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
size: {
|
||||
type: Number,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
style: computed(() => {
|
||||
if (!props.size && !props.color) {
|
||||
return {}
|
||||
}
|
||||
return {
|
||||
...(props.size ? { '--font-size': `${props.size}px` }: {}),
|
||||
...(props.color ? { '--color': props.color } : {}),
|
||||
} as CSSProperties
|
||||
}),
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@import 'mixins/mixins';
|
||||
@import 'common/var';
|
||||
|
||||
@font-face {
|
||||
@ -1167,3 +1170,26 @@
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@include b(icon) {
|
||||
--color: inherit;
|
||||
--font-size: #{map.get($--font-size, 'base')};
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
fill: currentColor;
|
||||
color: var(--color);
|
||||
font-size: var(--font-size);
|
||||
|
||||
@include when(loading) {
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
.demo-icon .source > div > i {
|
||||
.demo-icon .source > div > i:not(.no-inherit) {
|
||||
color: #606266;
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i.no-inherit {
|
||||
margin: 0 20px;
|
||||
font-size: 1.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.demo-icon .source button {
|
||||
margin: 0 20px;
|
||||
}
|
||||
@ -29,6 +35,15 @@
|
||||
margin-right: -1px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
.demo-svg-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
|
||||
@ -2,7 +2,118 @@
|
||||
|
||||
Element Plus provides a set of common icons.
|
||||
|
||||
### Basic usage
|
||||
:::warning
|
||||
Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/en-US/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
|
||||
:::
|
||||
|
||||
### SvgIcon Usage
|
||||
- If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
|
||||
|
||||
- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/en-US/component/icon#svg-tu-biao-ji-he)
|
||||
|
||||
### Installation
|
||||
The current icon is only targeted to [Vue3](https://v3.vuejs.org).
|
||||
#### Using yarn
|
||||
```shell
|
||||
$ yarn add @element-plus/icons
|
||||
```
|
||||
|
||||
#### Using npm
|
||||
```shell
|
||||
$ npm install @element-plus/icons
|
||||
```
|
||||
|
||||
#### Simple usage
|
||||
|
||||
```html
|
||||
<!-- Use el-icon to provide attributes to SVG icon -->
|
||||
<el-icon :size="size" :color="color">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<!-- Or use it independently without derive attributes from parent -->
|
||||
<edit />
|
||||
|
||||
<script lang="ts">
|
||||
import { Edit } from '@element-plus/icons'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// Full name
|
||||
[Edit.name]: Edit,
|
||||
// or Shorthanded,
|
||||
Edit,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
```
|
||||
#### Combined with `el-icon`
|
||||
:::demo `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
|
||||
```html
|
||||
<p>
|
||||
with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
|
||||
</p>
|
||||
<el-icon :size="20">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<el-icon color="#409EFC" class="no-inherit">
|
||||
<share />
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<delete />
|
||||
</el-icon>
|
||||
<el-icon class="is-loading">
|
||||
<loading />
|
||||
</el-icon>
|
||||
<el-button type="primary">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;">
|
||||
Search
|
||||
</span>
|
||||
</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Using SVG icon directly
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="font-size: 20px;">
|
||||
<!-- Since svg icons do not carry any attributes by default -->
|
||||
<!-- You need to provide attributes directly -->
|
||||
<edit style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<share style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<delete style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<search style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### SVG Icons collection
|
||||
:::tip
|
||||
This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
|
||||
|
||||
**You can use SVG icon in any version as long as you install it**
|
||||
|
||||
**You can click the icon to copy it**
|
||||
:::
|
||||
|
||||
<ul class="icon-list">
|
||||
<li
|
||||
v-for="component in $svgIcons"
|
||||
:key="component"
|
||||
@click="$copySvgIcon(component)">
|
||||
<span class="demo-svg-icon">
|
||||
<el-icon color="#000">
|
||||
<component :is="component" />
|
||||
</el-icon>
|
||||
<span class="icon-name">{{component}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Font Icon Basic usage
|
||||
|
||||
Just assign the class name to `el-icon-iconName`.
|
||||
|
||||
@ -17,7 +128,7 @@ Just assign the class name to `el-icon-iconName`.
|
||||
```
|
||||
:::
|
||||
|
||||
### Icons
|
||||
### Font Icons
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in $icon" :key="name">
|
||||
@ -27,3 +138,10 @@ Just assign the class name to `el-icon-iconName`.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
### SVG Icon Attributes
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
|
||||
| size | SVG icon size, size x size | number | - | inherit from font size |
|
||||
|
||||
@ -2,7 +2,118 @@
|
||||
|
||||
Element Plus proporciona un conjunto de iconos propios.
|
||||
|
||||
### Uso básico
|
||||
:::warning
|
||||
Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/en-US/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
|
||||
:::
|
||||
|
||||
### SvgIcon Usage
|
||||
- If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
|
||||
|
||||
- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/en-US/component/icon#svg-tu-biao-ji-he)
|
||||
|
||||
### Installation
|
||||
The current icon is only targeted to [Vue3](https://v3.vuejs.org).
|
||||
#### Using yarn
|
||||
```shell
|
||||
$ yarn add @element-plus/icons
|
||||
```
|
||||
|
||||
#### Using npm
|
||||
```shell
|
||||
$ npm install @element-plus/icons
|
||||
```
|
||||
|
||||
#### Simple usage
|
||||
|
||||
```html
|
||||
<!-- Use el-icon to provide attributes to SVG icon -->
|
||||
<el-icon :size="size" :color="color">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<!-- Or use it independently without derive attributes from parent -->
|
||||
<edit />
|
||||
|
||||
<script lang="ts">
|
||||
import { Edit } from '@element-plus/icons'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// Full name
|
||||
[Edit.name]: Edit,
|
||||
// or Shorthanded,
|
||||
Edit,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
```
|
||||
#### Combined with `el-icon`
|
||||
:::demo `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
|
||||
```html
|
||||
<p>
|
||||
with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
|
||||
</p>
|
||||
<el-icon :size="20">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<el-icon color="#409EFC" class="no-inherit">
|
||||
<share />
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<delete />
|
||||
</el-icon>
|
||||
<el-icon class="is-loading">
|
||||
<loading />
|
||||
</el-icon>
|
||||
<el-button type="primary">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;">
|
||||
Search
|
||||
</span>
|
||||
</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Using SVG icon directly
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="font-size: 20px;">
|
||||
<!-- Since svg icons do not carry any attributes by default -->
|
||||
<!-- You need to provide attributes directly -->
|
||||
<edit style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<share style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<delete style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<search style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### SVG Icons collection
|
||||
:::tip
|
||||
This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
|
||||
|
||||
**You can use SVG icon in any version as long as you install it**
|
||||
|
||||
**You can click the icon to copy it**
|
||||
:::
|
||||
|
||||
<ul class="icon-list">
|
||||
<li
|
||||
v-for="component in $svgIcons"
|
||||
:key="component"
|
||||
@click="$copySvgIcon(component)">
|
||||
<span class="demo-svg-icon">
|
||||
<el-icon color="#000">
|
||||
<component :is="component" />
|
||||
</el-icon>
|
||||
<span class="icon-name">{{component}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Font Icon uso básico
|
||||
|
||||
Simplemente asigna el nombre de la clase a `el-icon-iconName`.
|
||||
|
||||
@ -17,7 +128,7 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
|
||||
```
|
||||
:::
|
||||
|
||||
### Iconos
|
||||
### Font Iconos
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in $icon" :key="name">
|
||||
@ -27,3 +138,10 @@ Simplemente asigna el nombre de la clase a `el-icon-iconName`.
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
### SVG Icon Atributos
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
|
||||
| size | SVG icon size, size x size | number | - | inherit from font size |
|
||||
|
||||
@ -2,9 +2,120 @@
|
||||
|
||||
Element Plus fournit un ensemble d'icônes basiques.
|
||||
|
||||
### Usage
|
||||
:::warning
|
||||
Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/fr/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
|
||||
:::
|
||||
|
||||
Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>`.
|
||||
### SVG Icon Usage
|
||||
- If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
|
||||
|
||||
- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/fr/component/icon#svg-tu-biao-ji-he)
|
||||
|
||||
### Installation
|
||||
The current icon is only targeted to [Vue3](https://v3.vuejs.org).
|
||||
#### Using yarn
|
||||
```shell
|
||||
$ yarn add @element-plus/icons
|
||||
```
|
||||
|
||||
#### Using npm
|
||||
```shell
|
||||
$ npm install @element-plus/icons
|
||||
```
|
||||
|
||||
#### Simple usage
|
||||
|
||||
```html
|
||||
<!-- Use el-icon to provide attributes to SVG icon -->
|
||||
<el-icon :size="size" :color="color">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<!-- Or use it independently without derive attributes from parent -->
|
||||
<edit />
|
||||
|
||||
<script lang="ts">
|
||||
import { Edit } from '@element-plus/icons'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// Full name
|
||||
[Edit.name]: Edit,
|
||||
// or Shorthanded,
|
||||
Edit,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
```
|
||||
#### Combined with `el-icon`
|
||||
:::demo `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
|
||||
```html
|
||||
<p>
|
||||
with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
|
||||
</p>
|
||||
<el-icon :size="20">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<el-icon color="#409EFC" class="no-inherit">
|
||||
<share />
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<delete />
|
||||
</el-icon>
|
||||
<el-icon class="is-loading">
|
||||
<loading />
|
||||
</el-icon>
|
||||
<el-button type="primary">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;">
|
||||
Search
|
||||
</span>
|
||||
</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Using SVG icônes directly
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="font-size: 20px;">
|
||||
<!-- Since svg icons do not carry any attributes by default -->
|
||||
<!-- You need to provide attributes directly -->
|
||||
<edit style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<share style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<delete style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<search style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### SVG icônes collection
|
||||
:::tip
|
||||
This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
|
||||
|
||||
**You can use SVG icon in any version as long as you install it**
|
||||
|
||||
**You can click the icon to copy it**
|
||||
:::
|
||||
|
||||
<ul class="icon-list">
|
||||
<li
|
||||
v-for="component in $svgIcons"
|
||||
:key="component"
|
||||
@click="$copySvgIcon(component)">
|
||||
<span class="demo-svg-icon">
|
||||
<el-icon color="#000">
|
||||
<component :is="component" />
|
||||
</el-icon>
|
||||
<span class="icon-name">{{component}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Font Icônes Basic usage
|
||||
|
||||
Just assign the class name to `el-icon-iconName`.
|
||||
|
||||
:::demo
|
||||
|
||||
@ -12,12 +123,12 @@ Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="el-icon-search">Chercher</el-button>
|
||||
<el-button type="primary" icon="el-icon-search">Search</el-button>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
### Icônes
|
||||
### Font Icônes
|
||||
|
||||
<ul class="icon-list">
|
||||
<li v-for="name in $icon" :key="name">
|
||||
@ -27,3 +138,10 @@ Il vous suffit d'assigner le nom de classe `el-icon-iconName` à une balise `<i>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
### SVG icônes Attributs
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
|
||||
| size | SVG icon size, size x size | number | - | inherit from font size |
|
||||
|
||||
@ -2,7 +2,118 @@
|
||||
|
||||
Element Plusは、共通のアイコンのセットを提供します。
|
||||
|
||||
### 基本的な使い方
|
||||
:::warning
|
||||
Element Plus team is replacing all **Font Icon** in the previously built components to **SVG Icon**, please keep you eyes on [ChangeLog](/#/jp/component/changelog), for getting latest updates, **Font Icon** will be deprecated after the first stable release.
|
||||
:::
|
||||
|
||||
### SvgIcon Usage
|
||||
- If you want to **use directly** like the example, you need to [globally register](https://v3.vuejs.org/guide/component-registration.html#global-registration) the components before using it.
|
||||
|
||||
- If you want to see all available SVG icons please check [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) and the source [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons) out or [SVG icons](/#/en-US/component/icon#svg-tu-biao-ji-he)
|
||||
|
||||
### Installation
|
||||
The current icon is only targeted to [Vue3](https://v3.vuejs.org).
|
||||
#### Using yarn
|
||||
```shell
|
||||
$ yarn add @element-plus/icons
|
||||
```
|
||||
|
||||
#### Using npm
|
||||
```shell
|
||||
$ npm install @element-plus/icons
|
||||
```
|
||||
|
||||
#### Simple usage
|
||||
|
||||
```html
|
||||
<!-- Use el-icon to provide attributes to SVG icon -->
|
||||
<el-icon :size="size" :color="color">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<!-- Or use it independently without derive attributes from parent -->
|
||||
<edit />
|
||||
|
||||
<script lang="ts">
|
||||
import { Edit } from '@element-plus/icons'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// Full name
|
||||
[Edit.name]: Edit,
|
||||
// or Shorthanded,
|
||||
Edit,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
```
|
||||
#### Combined with `el-icon`
|
||||
:::demo `el-icon` provides extra attributes for raw SVG icon, for more detail, please read to the end.
|
||||
```html
|
||||
<p>
|
||||
with extra class <b>is-loading</b>, your icon is able to rotate 360 deg in 2 seconds, you can also override this
|
||||
</p>
|
||||
<el-icon :size="20">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<el-icon color="#409EFC" class="no-inherit">
|
||||
<share />
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<delete />
|
||||
</el-icon>
|
||||
<el-icon class="is-loading">
|
||||
<loading />
|
||||
</el-icon>
|
||||
<el-button type="primary">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;">
|
||||
Search
|
||||
</span>
|
||||
</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### Using SVG icon directly
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="font-size: 20px;">
|
||||
<!-- Since svg icons do not carry any attributes by default -->
|
||||
<!-- You need to provide attributes directly -->
|
||||
<edit style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<share style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<delete style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<search style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### SVG Icons collection
|
||||
:::tip
|
||||
This collection is updated after ElementPlus@1.0.2-beta.66(included), you can only use `el-icon` to wrap it after ElementPlus@1.0.2-beta.66(included), or directly use it without version constrains
|
||||
|
||||
**You can use SVG icon in any version as long as you install it**
|
||||
|
||||
**You can click the icon to copy it**
|
||||
:::
|
||||
|
||||
<ul class="icon-list">
|
||||
<li
|
||||
v-for="component in $svgIcons"
|
||||
:key="component"
|
||||
@click="$copySvgIcon(component)">
|
||||
<span class="demo-svg-icon">
|
||||
<el-icon color="#000">
|
||||
<component :is="component" />
|
||||
</el-icon>
|
||||
<span class="icon-name">{{component}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Font アイコン 基本的な使い方
|
||||
|
||||
クラス名に `el-icon-iconName` を代入するだけで使えます。
|
||||
|
||||
@ -27,3 +138,9 @@ Element Plusは、共通のアイコンのセットを提供します。
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### SVG Icon 属性
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| color | SVG tag's fill attribute | Pick\<CSSProperties, 'color'\> | - | inherit from color |
|
||||
| size | SVG icon size, size x size | number | - | inherit from font size |
|
||||
|
||||
@ -2,17 +2,129 @@
|
||||
|
||||
提供了一套常用的图标集合。
|
||||
|
||||
### 使用方法
|
||||
:::warning
|
||||
Element Plus 团队正在将原有组件内的 **Font Icon** 向 **SVG Icon** 迁移，请多多留意 [ChangeLog](/#/zh-CN/component/changelog), 及时获取到更新信息，**Font Icon** 将会在第一个正式发布被废弃，请尽快迁移
|
||||
:::
|
||||
|
||||
### SvgIcon 使用方法
|
||||
- 如果你想像用例一样**直接使用**，你需要[全局注册组件](https://v3.vuejs.org/guide/component-registration.html#global-registration)，才能够直接在项目里使用。
|
||||
|
||||
- 若想查看所有的组件，请访问 [@element-plus/icons](https://unpkg.com/browse/@element-plus/icons@latest/lib/) 和源代码 [Github/ElementPlus/icons](https://github.com/element-plus/element-plus-icons)，或者 [SVG 图标集合](/#/zh-CN/component/icon#svg-tu-biao-ji-he)
|
||||
|
||||
### 安装图标
|
||||
当前的图标只适用于 [Vue3](https://v3.vuejs.org)。
|
||||
#### 使用 yarn
|
||||
```shell
|
||||
$ yarn add @element-plus/icons
|
||||
```
|
||||
|
||||
#### 使用 npm
|
||||
```shell
|
||||
$ npm install @element-plus/icons
|
||||
```
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<!-- 用 el-icon 为 SVG 提供属性 -->
|
||||
<el-icon :size="size" :color="color">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<!-- 或者单独使用，不从祖先节点继承任何属性 -->
|
||||
<edit />
|
||||
|
||||
<script lang="ts">
|
||||
import { Edit } from '@element-plus/icons'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
// 全名
|
||||
[Edit.name]: Edit,
|
||||
// 或者以缩写的方式,
|
||||
Edit,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
#### 结合 `el-icon` 使用
|
||||
:::demo `el-icon` 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读
|
||||
```html
|
||||
<p>
|
||||
通过添加额外的类名 <b>is-loading</b>，你的图标就可以在 2 秒内旋转 360 度，但让你也可以自己改写想要的动画。
|
||||
</p>
|
||||
<el-icon :size="20">
|
||||
<edit />
|
||||
</el-icon>
|
||||
<el-icon color="#409EFC" class="no-inherit">
|
||||
<share />
|
||||
</el-icon>
|
||||
<el-icon>
|
||||
<delete />
|
||||
</el-icon>
|
||||
<el-icon class="is-loading">
|
||||
<loading />
|
||||
</el-icon>
|
||||
<el-button type="primary">
|
||||
<el-icon style="vertical-align: middle;">
|
||||
<search />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle;">
|
||||
搜索
|
||||
</span>
|
||||
</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
#### 直接使用 SVG icon
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<div style="font-size: 20px;">
|
||||
<!-- SVG icon 自身不带任何属性，你需要额外提供属性。-->
|
||||
<edit style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<share style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<delete style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
<search style="width: 1em; height: 1em; margin-right: 8px;" />
|
||||
</div>
|
||||
```
|
||||
:::
|
||||
|
||||
### SVG 图标集合
|
||||
:::tip
|
||||
`el-icon (包裹组件)` 更新于 **ElementPlus@1.0.2-beta.66**，适用于 **1.0.2-beta.66(包含66)** 以后的版本，你只能在该版本之后的版本使用 `el-icon`。
|
||||
|
||||
**SVG 图标可以在任意版本使用。**
|
||||
|
||||
**点击图标可复制到剪贴板。**
|
||||
:::
|
||||
|
||||
|
||||
|
||||
<ul class="icon-list">
|
||||
<li
|
||||
v-for="component in $svgIcons"
|
||||
:key="component"
|
||||
@click="$copySvgIcon(component)">
|
||||
<span class="demo-svg-icon">
|
||||
<el-icon color="#000">
|
||||
<component :is="component" />
|
||||
</el-icon>
|
||||
<span class="icon-name">{{component}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Font Icon 使用方法
|
||||
|
||||
直接通过设置类名为 `el-icon-iconName` 来使用即可。例如：
|
||||
|
||||
:::demo
|
||||
```html
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
||||
|
||||
<i class="el-icon-edit"></i>
|
||||
<i class="el-icon-share"></i>
|
||||
<i class="el-icon-delete"></i>
|
||||
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
||||
```
|
||||
:::
|
||||
|
||||
@ -26,3 +138,10 @@
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
### SvgIcon 属性
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| color | svg 的 fill 颜色 | Pick\<CSSProperties, 'color'\> | - | inherit |
|
||||
| size | svg 图标的大小, size x size | number | - | inherit |
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
import { createApp, nextTick } from 'vue'
|
||||
import { hyphenate } from '@vue/shared'
|
||||
import * as ElementPlusSvgIcons from '@element-plus/icons'
|
||||
import clipboardCopy from 'clipboard-copy'
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import routes from './route.config'
|
||||
import demoBlock from './components/demo-block'
|
||||
@ -16,7 +19,7 @@ import icon from './icon.json'
|
||||
import dayjs from 'dayjs'
|
||||
import 'dayjs/locale/zh-cn'
|
||||
dayjs.locale('zh-cn') // todo: locale based on Doc site lang
|
||||
|
||||
import compLang from './i18n/component.json'
|
||||
import App from './app.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import '../packages/theme-chalk/src/index.scss'
|
||||
@ -24,8 +27,16 @@ import '../packages/theme-chalk/src/display.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
const svgIcons = []
|
||||
for (let i in ElementPlusSvgIcons) {
|
||||
const component = ElementPlusSvgIcons[i]
|
||||
app.component(component.name, component)
|
||||
svgIcons.push(component.name)
|
||||
}
|
||||
app.config.globalProperties.$svgIcons = svgIcons
|
||||
app.config.globalProperties.$icon = icon
|
||||
|
||||
|
||||
app.component('DemoBlock', demoBlock)
|
||||
app.component('RightNav', RightNav)
|
||||
app.component('MainFooter', MainFooter)
|
||||
@ -40,9 +51,32 @@ const router = createRouter({
|
||||
app.use(ElementPlus)
|
||||
app.use(router)
|
||||
router.isReady().then(() => {
|
||||
let lang = location.hash.split('/')[1]
|
||||
let langConfig = compLang.filter(config => config.lang === lang)[0]['demo-block']
|
||||
|
||||
app.config.globalProperties.$copySvgIcon = iconName => {
|
||||
clipboardCopy(
|
||||
`<el-svg-icon>
|
||||
<${hyphenate(iconName)} />
|
||||
</el-svg-icon>
|
||||
`,
|
||||
).then(() => {
|
||||
app.config.globalProperties.$message({
|
||||
showClose: true,
|
||||
message: langConfig['copy-success'],
|
||||
type: 'success',
|
||||
})
|
||||
}).catch(() => {
|
||||
app.config.globalProperties.$message({
|
||||
showClose: true,
|
||||
message: langConfig['copy-error'],
|
||||
type: 'error',
|
||||
})
|
||||
})
|
||||
}
|
||||
router.afterEach(async route => {
|
||||
await nextTick()
|
||||
lang = location.hash.split('/')[1]
|
||||
const data = title[route.meta.lang]
|
||||
for (let val in data) {
|
||||
if (new RegExp('^' + val, 'g').test(route.name)) {
|
||||
|
||||
@ -1167,6 +1167,11 @@
|
||||
version "9.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@commitlint/types/-/types-9.1.2.tgz#d05f66db03e3a3638a654e8badf2deb489eb220d"
|
||||
|
||||
"@element-plus/icons@^0.0.11":
|
||||
version "0.0.11"
|
||||
resolved "https://registry.yarnpkg.com/@element-plus/icons/-/icons-0.0.11.tgz#9b187c002774548b911850d17fa5fc2f9a515f57"
|
||||
integrity sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A==
|
||||
|
||||
"@eslint/eslintrc@^0.1.3":
|
||||
version "0.1.3"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.1.3.tgz#7d1a2b2358552cc04834c0979bd4275362e37085"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user