12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <template>
- <PageWrapper title="Icon组件示例">
- <CollapseContainer title="Antv Icon使用 (直接按需引入相应组件即可)">
- <div class="flex justify-around">
- <GithubFilled :style="{ fontSize: '30px' }" />
- <QqCircleFilled :style="{ fontSize: '30px' }" />
- <WechatFilled :style="{ fontSize: '30px' }" />
- <AlipayCircleFilled :style="{ fontSize: '30px' }" />
- <IeCircleFilled :style="{ fontSize: '30px' }" />
- <TaobaoCircleFilled :style="{ fontSize: '30px' }" />
- <CodepenCircleFilled :style="{ fontSize: '30px' }" />
- </div>
- </CollapseContainer>
- <CollapseContainer title="IconIfy 组件使用" class="my-5">
- <div class="flex justify-around flex-wrap">
- <Icon icon="fa-solid:address-book" :size="30" />
- <Icon icon="mdi-light:bank" :size="30" />
- <Icon icon="jam:alien-f" :size="30" />
- <Icon icon="jam:android" :size="30" />
- </div>
- </CollapseContainer>
- <Alert
- show-icon
- message="推荐使用Iconify组件"
- description="Icon组件基本包含所有的图标,在下面网址内你可以查询到你想要的任何图标。并且打包只会打包所用到的图标。唯一不足的可能就是需要连接外网进行使用。"
- />
- <a-button type="link" @click="toIconify">Iconify 图标大全</a-button>
- </PageWrapper>
- </template>
- <script lang="ts">
- import { defineComponent } from 'vue';
- import { CollapseContainer } from '/@/components/Container/index';
- import { Alert } from 'ant-design-vue';
- import {
- QqCircleFilled,
- GithubFilled,
- WechatFilled,
- AlipayCircleFilled,
- IeCircleFilled,
- TaobaoCircleFilled,
- CodepenCircleFilled,
- } from '@ant-design/icons-vue';
- import Icon from '/@/components/Icon/index';
- import { openWindow } from '/@/utils';
- import { PageWrapper } from '/@/components/Page';
- export default defineComponent({
- components: {
- PageWrapper,
- CollapseContainer,
- GithubFilled,
- QqCircleFilled,
- WechatFilled,
- AlipayCircleFilled,
- IeCircleFilled,
- TaobaoCircleFilled,
- CodepenCircleFilled,
- Icon,
- Alert,
- },
- setup() {
- return {
- toIconify: () => {
- openWindow('https://iconify.design/');
- },
- };
- },
- });
- </script>
|