Browse Source
* refactor(icons-solidjs): update SVG paths for consistency and remove unused component - Modified SVG path for the accessible icon to ensure consistency in syntax. - Removed the `createSolidComponent.ts` file as it is no longer needed. * refactor(icons-solidjs): update package configuration and simplify rollup setup - Updated package.json to improve module exports and types definitions. - Simplified rollup configuration by replacing custom setup with rollup-preset-solid for better maintainability.pull/1484/head
Paweł Kuna
7 months ago
committed by
GitHub
GitHub
5 changed files with 81 additions and 98 deletions
@ -1,38 +1,7 @@ |
|||
import fs from 'fs' |
|||
import { getRollupConfig } from '../../.build/rollup-plugins.mjs' |
|||
import dts from "rollup-plugin-dts"; |
|||
import withSolid from 'rollup-preset-solid'; |
|||
|
|||
const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8')) |
|||
|
|||
const outputFileName = 'tabler-icons-solidjs'; |
|||
const inputs = ['./src/tabler-icons-solidjs.ts']; |
|||
const bundles = [ |
|||
{ |
|||
format: 'cjs', |
|||
extension: 'cjs', |
|||
inputs, |
|||
}, |
|||
{ |
|||
format: 'esm', |
|||
inputs, |
|||
preserveModules: true, |
|||
extension: 'js', |
|||
}, |
|||
]; |
|||
|
|||
export default [ |
|||
{ |
|||
input: inputs[0], |
|||
output: [ |
|||
{ |
|||
file: `dist/${outputFileName}.d.ts`, |
|||
format: 'es', |
|||
}, |
|||
], |
|||
plugins: [dts()], |
|||
}, |
|||
...getRollupConfig(pkg, outputFileName, bundles, { |
|||
'solid-js': 'solid-js', |
|||
'solid-js/h': 'solid-js/h', |
|||
}) |
|||
]; |
|||
export default withSolid({ |
|||
input: 'src/tabler-icons-solidjs.ts', |
|||
targets: ['esm', 'cjs'], |
|||
printInstructions: false, |
|||
}); |
|||
|
|||
@ -1,50 +0,0 @@ |
|||
import { JSX } from 'solid-js/jsx-runtime'; |
|||
import defaultAttributes from './defaultAttributes'; |
|||
import { splitProps } from 'solid-js'; |
|||
import h from 'solid-js/h'; |
|||
import { IconNode, IconProps } from './types'; |
|||
|
|||
const createSolidComponent = ( |
|||
type: 'outline' | 'filled', |
|||
iconName: string, |
|||
iconNamePascal: string, |
|||
iconNode: IconNode, |
|||
) => { |
|||
const Component = (props: IconProps): JSX.Element => { |
|||
const [localProps, rest] = splitProps(props, ['color', 'size', 'stroke', 'title', 'children', 'class']), |
|||
attributes = defaultAttributes[type]; |
|||
|
|||
const svgProps = { |
|||
...attributes, |
|||
width: () => (localProps.size != null ? localProps.size : attributes.width), |
|||
height: () => (localProps.size != null ? localProps.size : attributes.height), |
|||
title: () => localProps.title != null ? localProps.title : undefined, |
|||
...(type === 'filled' |
|||
? { |
|||
fill: () => (localProps.color != null ? localProps.color : 'currentColor'), |
|||
} |
|||
: { |
|||
stroke: () => (localProps.color != null ? localProps.color : 'currentColor'), |
|||
'stroke-width': () => |
|||
localProps.stroke != null ? localProps.stroke : attributes['stroke-width'], |
|||
}), |
|||
class: () => |
|||
`tabler-icon tabler-icon-${iconName} ${localProps.class != null ? localProps.class : ''}`, |
|||
}; |
|||
|
|||
return h( |
|||
'svg', |
|||
[svgProps, rest], |
|||
[ |
|||
localProps.title && h('title', {}, localProps.title), |
|||
...iconNode.map(([tag, attrs]) => h(tag, attrs)), |
|||
localProps.children |
|||
], |
|||
) as unknown as JSX.Element; |
|||
}; |
|||
|
|||
Component.displayName = `${iconNamePascal}`; |
|||
return Component; |
|||
}; |
|||
|
|||
export default createSolidComponent; |
|||
@ -0,0 +1,56 @@ |
|||
import { JSX } from 'solid-js/jsx-runtime'; |
|||
import defaultAttributes from './defaultAttributes'; |
|||
import { splitProps } from 'solid-js'; |
|||
import { Dynamic } from 'solid-js/web'; |
|||
import { IconNode, IconProps } from './types'; |
|||
|
|||
const createSolidComponent = ( |
|||
type: 'outline' | 'filled', |
|||
iconName: string, |
|||
iconNamePascal: string, |
|||
iconNode: IconNode, |
|||
) => { |
|||
const Component = (props: IconProps): JSX.Element => { |
|||
const [localProps, rest] = splitProps(props, [ |
|||
'color', |
|||
'size', |
|||
'stroke', |
|||
'strokeWidth', |
|||
'title', |
|||
'children', |
|||
'class', |
|||
]); |
|||
const attributes = defaultAttributes[type]; |
|||
const strokeValue = localProps.stroke ?? localProps.strokeWidth; |
|||
|
|||
return ( |
|||
<svg |
|||
{...attributes} |
|||
{...rest} |
|||
width={localProps.size != null ? localProps.size : attributes.width} |
|||
height={localProps.size != null ? localProps.size : attributes.height} |
|||
class={`tabler-icon tabler-icon-${iconName} ${localProps.class != null ? localProps.class : ''}`} |
|||
{...(type === 'filled' |
|||
? { |
|||
fill: localProps.color != null ? localProps.color : 'currentColor', |
|||
} |
|||
: { |
|||
stroke: localProps.color != null ? localProps.color : 'currentColor', |
|||
'stroke-width': |
|||
strokeValue != null ? strokeValue : attributes['stroke-width'], |
|||
})} |
|||
> |
|||
{localProps.title != null && <title>{localProps.title}</title>} |
|||
{iconNode.map(([tag, attrs]) => ( |
|||
<Dynamic component={tag} {...attrs} /> |
|||
))} |
|||
{localProps.children} |
|||
</svg> |
|||
); |
|||
}; |
|||
|
|||
Component.displayName = `${iconNamePascal}`; |
|||
return Component; |
|||
}; |
|||
|
|||
export default createSolidComponent; |
|||
Loading…
Reference in new issue