Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added custom tag #15

Merged
merged 9 commits into from
May 26, 2020
Merged

added custom tag #15

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
305a560
added custom tag
LIUSHANYIN May 25, 2020
b90c6f1
fixed replace problem
LIUSHANYIN May 25, 2020
d32bfb0
changed the tag name to i
LIUSHANYIN May 25, 2020
b7fc68d
changed the default tag value to i
LIUSHANYIN May 26, 2020
7100ba8
added storybook and fixed the css
LIUSHANYIN May 26, 2020
eedf47b
fixed the span
LIUSHANYIN May 26, 2020
6e49379
add style
LIUSHANYIN May 26, 2020
eea1291
fixed!
LIUSHANYIN May 26, 2020
f281ec3
fixed!!!!
LIUSHANYIN May 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions src/components/Icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,25 @@ interface IProps {
color?: string;
size?: string;
classPrefix?: string;
tag?: string;
tag?: 'a';
url?: string;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

icons shouldn't have url and replace

replace: boolean;
}

const baseClass = 'vant-icon';

// TODO Accept custom tag element

export default function Icon({
name,
dot,
badge,
color,
size,
classPrefix = baseClass
classPrefix = baseClass,
tag,
url,
replace
}: IProps) {
const CustomTag = tag || 'a';
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

custom icon tag should be 'i' by default

const containerProps = {
className: classnames(`${classPrefix}__container`, [
{
Expand Down Expand Up @@ -55,12 +59,26 @@ export default function Icon({
}
});
}
if (url && tag === 'a') {
Object.assign(iconProps, {
href: url
});
if (replace) {
Object.assign(iconProps, {
target: '_self'
});
} else {
Object.assign(iconProps, {
target: '_blank'
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these don't belong here

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok. I just think maybe one day we need the icon to be an 'a' tag. I will delete these codes.

});
}
}

return (
<div {...containerProps}>
<CustomTag {...containerProps}>
<i {...iconProps} />
{dot && !badge && <span className={`${classPrefix}--dot`} />}
{badge && <span className={`${classPrefix}--badge`}>{badge}</span>}
</div>
</CustomTag>
);
}