agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2025-01-06 07:20:40 +00:00
Code Issues Releases Activity

Rename inline mode to svg in components

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-04-30 18:23:38 +03:00
parent 4601d540ef
commit f4efa1853d
15 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/react-demo/src/demo-components/Checkbox.tsx
View File

@ -29,7 +29,7 @@ export function Checkbox(props: CheckboxProps) {
>
<Icon
icon={checked ? checkedIcon : uncheckedIcon}
mode={checked ? 'mask' : 'inline'}
mode={checked ? 'mask' : 'svg'}
/>
{props.text}
</a>

4
demo/svelte-demo-vite/src/App.svelte
View File

@ -13,12 +13,12 @@
<Counter />
<p>
Visit <a href="https://svelte.dev">svelte.dev <Icon icon="ci:external-link" inline={true} /></a> to learn how to build <Icon icon="logos:svelte" inline={true} />
Visit <a href="https://svelte.dev">svelte.dev <Icon icon="ci:external-link" inline={true} mode="style" /></a> to learn how to build <Icon icon="logos:svelte" inline={true} />
apps.
</p>
<p>
Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit <Icon icon="ci:external-link" inline={true} /></a> for
Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit <Icon icon="ci:external-link" inline={true} mode="style" /></a> for
the officially supported framework, also powered by Vite!
</p>
</main>

20
demo/svelte-demo/public/global.css
View File

@ -48,22 +48,22 @@ p {
.test-row-icons {
padding-right: 4px;
}
.test-row-icons > svg {
.test-row-icons > :is(svg, span) {
color: #afafaf;
display: none;
}
.test-row-icons > svg.visible {
.test-row-icons > :is(svg, span).visible {
display: inline-block;
}
.test-row-icons > svg.success {
.test-row-icons > :is(svg, span).success {
color: #327335;
}
.test-row-icons > svg.failed {
.test-row-icons > :is(svg, span).failed {
color: #ba3329;
}
/* 24px icon */
.icon-24 svg {
.icon-24 :is(svg, span) {
font-size: 24px;
line-height: 1;
vertical-align: -0.25em;
@ -85,7 +85,7 @@ p {
clear: both;
}
.alert svg {
.alert :is(svg, span) {
position: absolute;
left: 12px;
top: 50%;
@ -110,17 +110,17 @@ p {
text-decoration: underline;
}
.checkbox svg {
.checkbox :is(svg, span) {
margin-right: 4px;
color: #afafaf;
font-size: 24px;
line-height: 1em;
vertical-align: -0.25em;
}
.checkbox--checked svg {
.checkbox--checked :is(svg, span) {
color: #327335;
}
.checkbox:hover svg {
.checkbox:hover :is(svg, span) {
color: inherit;
}
@ -130,7 +130,7 @@ p {
}
/* Inline demo */
.inline-demo svg {
.inline-demo :is(svg, span) {
color: #06a;
margin: 0 8px;
position: relative;

2
demo/svelte-demo/src/demo-components/Checkbox.svelte
View File

@ -23,6 +23,6 @@
</script>
<div class="checkbox-container">
<a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} />{text}</a>
<a href="# " class={className} on:click|preventDefault={toggle}><Icon icon={icon} mode={checked ? 'svg' : 'style'} />{text}</a>
<small>{hint}</small>
</div>

4
demo/svelte-demo/src/demo-components/Inline.svelte
View File

@ -8,11 +8,15 @@
<div>
Block icon (behaving like image):
<OfflineIcon icon="experiment2" />
<OfflineIcon icon="experiment2" mode="style" />
<FullIcon icon="experiment2" />
<FullIcon icon="experiment2" mode="style" />
</div>
<div>
Inline icon (behaving line text / icon font):
<OfflineIcon icon="experiment2" inline={true} />
<OfflineIcon icon="experiment2" inline={true} mode="style" />
<FullIcon icon="experiment2" inline={true} />
<FullIcon icon="experiment2" inline={true} mode="style" />
</div>
</section>

4
demo/svelte-demo/src/demo-components/UsageFull.svelte
View File

@ -7,13 +7,13 @@
<section class="icon-24">
<h1>Usage (full module)</h1>
<div>
Icon referenced by name: <Icon icon="mdi:home" />
Icon referenced by name (as svg, as span): <Icon icon="mdi:home" mode="svg" /><Icon icon="mdi:home" mode="style" />
</div>
<div class="alert">
<Icon icon="mdi-light:alert" on:load={event => {
console.log(event);
onLoadCalled = true;
}} />
}} mode="style" />
Important notice with alert icon{onLoadCalled ? '' : ' (loading...)'}!
</div>
</section>

2
demo/vue-demo/src/demo-components/Checkbox.vue
View File

@ -3,7 +3,7 @@
<span :class="className">
<Icon
:icon="icon"
:mode="isChecked ? 'inline' : 'style'"
:mode="isChecked ? 'svg' : 'style'"
@click="check"
/>{{ text }}
</span>

8
packages/iconify/src/scanner/config.ts
View File

@ -11,11 +11,11 @@ export const inlineClass = 'iconify-inline';
* Icon render mode
*
* 'style' = 'bg' or 'mask', depending on icon content
* 'bg' = inline style using `background`
* 'mask' = inline style using `mask`
* 'inline' = inline SVG.
* 'bg' = add inline style to placeholder using `background`
* 'mask' = add inline style to placeholder using `mask`
* 'svg' = <svg>
*/
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
/**
* Data used to verify if icon is the same

8
packages/react/src/props.ts
View File

@ -8,11 +8,11 @@ export { RawIconCustomisations };
* Icon render mode
*
* 'style' = 'bg' or 'mask', depending on icon content
* 'bg' = inline style using `background`
* 'mask' = inline style using `mask`
* 'inline' = inline SVG.
* 'bg' = <span> with style using `background`
* 'mask' = <span> with style using `mask`
* 'svg' = <svg>
*/
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
// Allow rotation to be string
/**

6
packages/react/src/render.ts
View File

@ -91,7 +91,7 @@ export const render = (
);
// Check mode
const mode: IconifyRenderMode = props.mode || 'inline';
const mode: IconifyRenderMode = props.mode || 'svg';
// Create style
const style: React.CSSProperties = {};
@ -99,7 +99,7 @@ export const render = (
// Create SVG component properties
const componentProps = {
...(mode === 'inline' ? svgDefaults : {}),
...(mode === 'svg' ? svgDefaults : {}),
ref,
};
@ -181,7 +181,7 @@ export const render = (
style.verticalAlign = '-0.125em';
}
if (mode === 'inline') {
if (mode === 'svg') {
// Add style
componentProps.style = {
...style,

1
packages/svelte/src/functions.ts
View File

@ -125,6 +125,7 @@ export { RawIconCustomisations, IconifyIconBuildResult };
/* Browser cache */
export { IconifyBrowserCacheType };
/**
* Enable cache
*/

8
packages/svelte/src/props.ts
View File

@ -7,11 +7,11 @@ export { RawIconCustomisations };
* Icon render mode
*
* 'style' = 'bg' or 'mask', depending on icon content
* 'bg' = inline style using `background`
* 'mask' = inline style using `mask`
* 'inline' = inline SVG.
* 'bg' = <span> with style using `background`
* 'mask' = <span> with style using `mask`
* 'svg' = <svg>
*/
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
// Allow rotation to be string
/**

11
packages/svelte/src/render.ts
View File

@ -86,10 +86,11 @@ export function render(
);
// Check mode
const mode: IconifyRenderMode = props.mode || 'inline';
const componentProps = (
mode === 'inline' ? { ...svgDefaults } : {}
) as Record<string, unknown>;
const mode: IconifyRenderMode = props.mode || 'svg';
const componentProps = (mode === 'svg' ? { ...svgDefaults } : {}) as Record<
string,
unknown
>;
// Create style if missing
let style = typeof props.style === 'string' ? props.style : '';
@ -181,7 +182,7 @@ export function render(
style = 'vertical-align: -0.125em; ' + style;
}
if (mode === 'inline') {
if (mode === 'svg') {
// Add icon stuff
Object.assign(componentProps, renderAttribs);

8
packages/vue/src/props.ts
View File

@ -7,11 +7,11 @@ export { RawIconCustomisations };
* Icon render mode
*
* 'style' = 'bg' or 'mask', depending on icon content
* 'bg' = inline style using `background`
* 'mask' = inline style using `mask`
* 'inline' = inline SVG.
* 'bg' = <span> with style using `background`
* 'mask' = <span> with style using `mask`
* 'svg' = <svg>
*/
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'inline';
export type IconifyRenderMode = 'style' | 'bg' | 'mask' | 'svg';
// Allow rotation to be string
/**

4
packages/vue/src/render.ts
View File

@ -111,7 +111,7 @@ export const render = (
const componentProps = { ...svgDefaults };
// Check mode
const mode: IconifyRenderMode = props.mode || 'inline';
const mode: IconifyRenderMode = props.mode || 'svg';
// Copy style
const style: VStyle = {};
@ -213,7 +213,7 @@ export const render = (
style.verticalAlign = '-0.125em';
}
if (mode === 'inline') {
if (mode === 'svg') {
// Add style
componentProps.style = {
...style,