forked from mirror/chinese-colors
feat: rename and change icon
This commit is contained in:
parent
8083b4444e
commit
1ec168eb56
@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.aside`
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 1rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||
.icon {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const IconInfo = ({ showPreview }) => {
|
||||
return (
|
||||
<Wrapper onClick={showPreview}>
|
||||
<svg
|
||||
t="1568267241706"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="1970"
|
||||
width="48"
|
||||
height="48"
|
||||
>
|
||||
<path
|
||||
d="M853.333333 0h-682.666666C75.093333 0 0 75.093333 0 170.666667v682.666666C0 948.906667 75.093333 1024 170.666667 1024h682.666666c95.573333 0 170.666667-75.093333 170.666667-170.666667v-682.666666C1024 75.093333 948.906667 0 853.333333 0zM955.733333 853.333333c0 54.613333-47.786667 102.4-102.4 102.4h-682.666666c-54.613333 0-102.4-47.786667-102.4-102.4v-682.666666C68.266667 116.053333 116.053333 68.266667 170.666667 68.266667h682.666666c54.613333 0 102.4 47.786667 102.4 102.4v682.666666z"
|
||||
p-id="1971"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
<path
|
||||
d="M853.333333 136.533333h-273.066666c-20.48 0-34.133333 13.653333-34.133334 34.133334s13.653333 34.133333 34.133334 34.133333H819.2v238.933333c0 20.48 13.653333 34.133333 34.133333 34.133334s34.133333-13.653333 34.133334-34.133334v-273.066666c0-20.48-13.653333-34.133333-34.133334-34.133334zM443.733333 819.2H204.8V580.266667c0-20.48-13.653333-34.133333-34.133333-34.133334s-34.133333 13.653333-34.133334 34.133334v273.066666c0 20.48 13.653333 34.133333 34.133334 34.133334h273.066666c20.48 0 34.133333-13.653333 34.133334-34.133334s-13.653333-34.133333-34.133334-34.133333z"
|
||||
p-id="1972"
|
||||
fill="#eee"
|
||||
></path>
|
||||
</svg>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconInfo;
|
43
src/components/IconScreenshot.js
Normal file
43
src/components/IconScreenshot.js
Normal file
@ -0,0 +1,43 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.aside`
|
||||
position: fixed;
|
||||
top: 4.6rem;
|
||||
right: 1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
|
||||
.icon {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const IconInfo = ({ showPreview }) => {
|
||||
return (
|
||||
<Wrapper onClick={showPreview}>
|
||||
<svg
|
||||
t="1568302878080"
|
||||
className="icon"
|
||||
viewBox="0 0 1024 1024"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
p-id="2072"
|
||||
width="32"
|
||||
height="32"
|
||||
>
|
||||
<path
|
||||
d="M527.757 670.725L661.592 536.89c6.92-6.92 18.182-6.917 25.131 0.033 6.935 6.935 6.964 18.2 0.033 25.131L527.163 721.647c-5.31 5.31-13.177 6.544-19.69 3.69-5.154 0.754-10.585-0.75-14.678-4.566L327.729 566.845c-7.168-6.684-7.532-17.945-0.844-25.117 6.702-7.187 17.957-7.585 25.115-0.91l140.17 130.71V314.768c0-9.824 7.986-17.788 17.794-17.788 9.826 0 17.794 8.001 17.794 17.788v355.956z m-13.091 57.605c-2.483 0-4.993-0.484-7.398-1.477a19.118 19.118 0 0 1-15.478-5.004L326.725 567.923c-7.751-7.228-8.163-19.43-0.918-27.2 7.246-7.769 19.447-8.21 27.199-0.982l137.689 128.396V314.77c0-10.62 8.644-19.263 19.268-19.263s19.267 8.641 19.267 19.263v352.397l131.32-131.318c3.62-3.622 8.443-5.617 13.578-5.617h0.02a19.164 19.164 0 0 1 13.617 5.65c7.513 7.513 7.528 19.721 0.033 27.216L528.206 722.69c-3.694 3.694-8.563 5.64-13.54 5.64z m-6.988-4.513l0.386 0.17c6.2 2.715 13.286 1.388 18.058-3.382l159.592-159.593c6.345-6.344 6.33-16.684-0.032-23.047a16.233 16.233 0 0 0-11.536-4.786h-0.017a16.147 16.147 0 0 0-11.494 4.754l-136.353 136.35V314.77c0-8.996-7.32-16.314-16.32-16.314-8.997 0-16.32 7.32-16.32 16.314v360.149L350.997 541.896c-6.563-6.12-16.895-5.745-23.031 0.838-6.137 6.58-5.791 16.914 0.771 23.034L493.8 719.693c3.627 3.381 8.535 4.905 13.46 4.186l0.418-0.062z m2.023 234.049c-60.268 0-118.742-11.808-173.799-35.095-53.169-22.488-100.916-54.679-141.915-95.678s-73.19-88.746-95.678-141.915c-23.287-55.057-35.095-113.53-35.095-173.798s11.808-118.742 35.094-173.798c22.49-53.17 54.68-100.917 95.678-141.916 40.999-40.998 88.746-73.19 141.915-95.678C390.958 76.701 449.432 64.894 509.7 64.894c60.267 0 118.741 11.808 173.798 35.094 53.169 22.49 100.916 54.68 141.915 95.678 40.999 41 73.19 88.747 95.678 141.916 23.288 55.056 35.094 113.53 35.094 173.798 0 60.267-11.807 118.741-35.094 173.798-22.488 53.17-54.68 100.917-95.678 141.915-40.999 41-88.746 73.19-141.915 95.678-55.056 23.288-113.53 35.095-173.797 35.095z m0-857.593c-55.508 0-109.345 10.867-160.017 32.3-48.952 20.705-92.92 50.35-130.68 88.11-37.761 37.761-67.406 81.729-88.11 130.68-21.434 50.673-32.3 104.51-32.3 160.017s10.867 109.344 32.3 160.015c20.704 48.953 50.349 92.92 88.11 130.68 37.76 37.762 81.728 67.406 130.68 88.111 50.672 21.433 104.51 32.3 160.017 32.3s109.344-10.868 160.015-32.3c48.953-20.705 92.92-50.35 130.68-88.11 37.761-37.761 67.406-81.728 88.111-130.68 21.433-50.673 32.3-104.51 32.3-160.016s-10.868-109.344-32.3-160.017c-20.705-48.951-50.35-92.919-88.11-130.68-37.762-37.76-81.728-67.405-130.681-88.11-50.672-21.434-104.51-32.3-160.015-32.3z"
|
||||
p-id="2073"
|
||||
fill="#ffffff"
|
||||
></path>
|
||||
</svg>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconInfo;
|
Loading…
Reference in New Issue
Block a user