mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
feat(docs): add auto import and update icon (#4554)
This commit is contained in:
三咲智子
GitHub
parent
bbd16a08e9
commit
151be696dd
@ -5,6 +5,6 @@
|
||||
"copy-code": "Copy code",
|
||||
"switch-button-option-text": "Switch to Options API",
|
||||
"switch-button-setup-text": "Switch to Composition API",
|
||||
"copy-success": "Copied！",
|
||||
"copy-success": "Copied!",
|
||||
"copy-error": "This browser does not support automatic copy！"
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
"copy-success": "Copied！",
|
||||
"copy-success": "Copied!",
|
||||
"copy-error": "Your browser does not support copy :("
|
||||
}
|
||||
|
||||
@ -43,8 +43,8 @@ const copySvgIcon = async (name, refs) => {
|
||||
<div style="text-align: right">
|
||||
<el-switch
|
||||
v-model="copyIcon"
|
||||
active-text="Copy Icon Code"
|
||||
inactive-text="Copy Svg Content"
|
||||
active-text="Copy icon code"
|
||||
inactive-text="Copy SVG content"
|
||||
>
|
||||
</el-switch>
|
||||
</div>
|
||||
@ -75,12 +75,12 @@ const copySvgIcon = async (name, refs) => {
|
||||
border-left: 1px solid var(--el-border-color-base);
|
||||
border-radius: 4px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
color: var(--el-text-color-regular);
|
||||
height: 120px;
|
||||
height: 90px;
|
||||
font-size: 13px;
|
||||
border-right: 1px solid var(--el-border-color-base);
|
||||
border-bottom: 1px solid var(--el-border-color-base);
|
||||
|
||||
@ -9,30 +9,31 @@ Element Plus provides a set of common icons.
|
||||
|
||||
:::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.
|
||||
⚠️ **Font Icon** has been removed, since version `1.2.0-beta.1`.
|
||||
|
||||
:::
|
||||
|
||||
<script setup>
|
||||
import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons'
|
||||
</script>
|
||||
|
||||
## SvgIcon Usage
|
||||
## 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](/#/en-US/component/icon#svg-tu-biao-ji-he)
|
||||
- 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 [element-plus-icons](https://github.com/element-plus/element-plus-icons) out or [Icon Collection](#icons-collection)
|
||||
|
||||
- CDN importing and [auto importing](https://github.com/antfu/unplugin-icons) is under developing.
|
||||
|
||||
## Installation
|
||||
|
||||
The current icon is only targeted to [Vue3](https://v3.vuejs.org).
|
||||
|
||||
## Using packaging manager
|
||||
### Using packaging manager
|
||||
|
||||
```shell
|
||||
$ yarn add @element-plus/icons
|
||||
# or
|
||||
# Choose a package manager you like.
|
||||
|
||||
# NPM
|
||||
$ npm install @element-plus/icons
|
||||
# Yarn
|
||||
$ yarn add @element-plus/icons
|
||||
# pnpm
|
||||
$ pnpm install @element-plus/icons
|
||||
```
|
||||
|
||||
## Simple usage
|
||||
@ -57,6 +58,10 @@ so you need to use an alias in order to render the icon, if you register `Menu`
|
||||
</template>
|
||||
```
|
||||
|
||||
<script setup>
|
||||
import { Edit, Share, Delete, Search, Loading } from '@element-plus/icons'
|
||||
</script>
|
||||
|
||||
<ElRow>
|
||||
<div>
|
||||
<ElIcon :size="30">
|
||||
@ -150,7 +155,7 @@ so you need to use an alias in order to render the icon, if you register `Menu`
|
||||
</div>
|
||||
</ElRow>
|
||||
|
||||
## SVG Icons collection <ElTag>Available >= 1.0.2-beta.66</ElTag>
|
||||
## Icon Collection
|
||||
|
||||
:::tip
|
||||
|
||||
@ -162,20 +167,6 @@ so you need to use an alias in order to render the icon, if you register `Menu`
|
||||
|
||||
<IconList />
|
||||
|
||||
<!-- <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> -->
|
||||
|
||||
## Icon Attributes
|
||||
|
||||
| Attribute | Description | Type | Acceptable Value | Default |
|
||||
|
||||
@ -46,24 +46,28 @@ You need to use an additional plugin to import components you used.
|
||||
|
||||
#### Auto import <el-tag type="primary" style="vertical-align: middle;" effect="dark" size="small">Recommend</el-tag>
|
||||
|
||||
First you need install `unplugin-vue-components`.
|
||||
First you need install `unplugin-vue-components` and `unplugin-auto-import`.
|
||||
|
||||
```shell
|
||||
npm install unplugin-vue-components
|
||||
npm install -D unplugin-vue-components unplugin-auto-import
|
||||
```
|
||||
|
||||
Then add the code below into your `Vite` or `webpack` config file.
|
||||
Then add the code below into your `Vite` or `Webpack` config file.
|
||||
|
||||
##### Vite
|
||||
|
||||
```ts
|
||||
// vite.config.ts
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
// ...
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
@ -75,12 +79,16 @@ export default {
|
||||
|
||||
```ts
|
||||
// webpack.config.js
|
||||
import AutoImport from 'unplugin-auto-import/webpack'
|
||||
const Components = require('unplugin-vue-components/webpack')
|
||||
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
|
||||
|
||||
module.exports = {
|
||||
// ...
|
||||
plugins: [
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
}),
|
||||
@ -88,9 +96,9 @@ module.exports = {
|
||||
}
|
||||
```
|
||||
|
||||
For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#readme).
|
||||
For more bundlers ([Rollup](https://rollupjs.org/), [Vue CLI](https://cli.vuejs.org/)) and configs please reference [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components#installation) and [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import#install).
|
||||
|
||||
#### Manually import
|
||||
### Manually import
|
||||
|
||||
Element Plus provides out of box [Tree Shaking](https://webpack.js.org/guides/tree-shaking/)
|
||||
functionalities based on ES Module.
|
||||
@ -121,6 +129,19 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
:::warning
|
||||
|
||||
You need to manually import the styles if you're using `unplugin-element-plus` and only used the component API.
|
||||
|
||||
Example:
|
||||
|
||||
```ts
|
||||
import 'element-plus/es/components/message/style/css'
|
||||
import { ElMessage } from 'element-plus'
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Starter Template
|
||||
|
||||
### Vue CLI
|
||||
|
||||
Loading…
Reference in New Issue
Block a user