74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import { AntDesignOutlined, DashboardOutlined, TwitterOutlined } from '../../src';
|
||
|
|
|
||
|
|
const Div = styled.div`
|
||
|
|
position: relative;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
line-height: 1;
|
||
|
|
&:after {
|
||
|
|
width: 100%;
|
||
|
|
height: 1px;
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0.125em;
|
||
|
|
left: 0;
|
||
|
|
background-color: hotpink;
|
||
|
|
z-index: -100;
|
||
|
|
}
|
||
|
|
&:before {
|
||
|
|
width: 100%;
|
||
|
|
height: 1px;
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0.125em;
|
||
|
|
left: 0;
|
||
|
|
background-color: hotpink;
|
||
|
|
z-index: -100;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export default class SimpleDemo extends React.Component<{}> {
|
||
|
|
static displaySize = ['64px', '48px', '32px', '24px', '16px', '12px', '8px'];
|
||
|
|
|
||
|
|
static relatedHref =
|
||
|
|
'https://blog.prototypr.io/align-' +
|
||
|
|
'svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4';
|
||
|
|
|
||
|
|
static renderStatement(fontSize: string, index: number) {
|
||
|
|
const style: React.CSSProperties = {
|
||
|
|
fontSize,
|
||
|
|
color: (fontSize === '48px' && 'lightblue') || 'inherit',
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<Div key={fontSize + index} style={style}>
|
||
|
|
{fontSize}
|
||
|
|
Ant Design
|
||
|
|
<AntDesignOutlined />
|
||
|
|
0123
|
||
|
|
<DashboardOutlined />
|
||
|
|
你好
|
||
|
|
<TwitterOutlined />
|
||
|
|
</Div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<h1>Simple Demo - Icons Alignments</h1>
|
||
|
|
{
|
||
|
|
SimpleDemo.displaySize.map((fontSize, index) =>
|
||
|
|
SimpleDemo.renderStatement(fontSize, index),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
See{' '}
|
||
|
|
<a href={SimpleDemo.relatedHref} target="_blank" rel="noopener noreferrer">
|
||
|
|
related blog
|
||
|
|
</a>{' '}
|
||
|
|
for detail.
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|