Skip to content

Commit 92f37d8

Browse files
JustineoJustineo
committed
fix: fix attributes on the svg elem, improve style
1 parent dd0d276 commit 92f37d8

File tree

12 files changed

+993
-119
lines changed

12 files changed

+993
-119
lines changed

‎.eslintrc.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
es2021: true,
5+
node: true
6+
},
7+
extends: ['standard'],
8+
parserOptions: {
9+
ecmaFeatures: {
10+
jsx: true
11+
},
12+
ecmaVersion: 'latest',
13+
sourceType: 'module'
14+
},
15+
rules: {}
16+
}

‎build/generate.js

+68-58
Original file line numberDiff line numberDiff line change
@@ -62,101 +62,111 @@ const ICON_EXPORT_TPL = fs.readFileSync(
6262
const ICON_PACKS = ['dls-icons-react', 'dls-icons-vue', 'dls-icons-vue-3']
6363
const DATA_PACK = 'dls-icons-data'
6464

65-
function getPackDir(name, ...rest) {
65+
function getPackDir (name, ...rest) {
6666
return path.resolve(__dirname, `../packages/${name}`, ...rest)
6767
}
6868

6969
const DATA_DIR = getPackDir(DATA_PACK, 'src')
7070

71-
function clearDir(dir) {
71+
function clearDir (dir) {
7272
rimraf.sync(dir)
7373
mkdirp.sync(dir)
7474
}
7575

76-
function renderTpl(tpl, data) {
77-
for (let key in data) {
78-
if (data.hasOwnProperty(key)) {
76+
function renderTpl (tpl, data) {
77+
for (const key in data) {
78+
if (Object.prototype.hasOwnProperty.call(data, key)) {
7979
tpl = tpl.replace(new RegExp(`{${key}}`, 'g'), data[key])
8080
}
8181
}
8282
return tpl
8383
}
8484

85-
async function generate() {
85+
async function generate () {
8686
clearDir(SVG_DIR)
8787
clearDir(path.join(DATA_DIR, 'icons'))
8888

8989
ICON_PACKS.forEach((pack) => {
90-
let iconsDir = path.join(getPackDir(pack), 'src/icons')
90+
const iconsDir = path.join(getPackDir(pack), 'src/icons')
9191
clearDir(iconsDir)
9292
})
9393

9494
Promise.all(
9595
(await getSVGFiles()).map(async ({ slug, content }) => {
96-
let file = `${slug}.svg`
97-
let { el, content: svg, width, height } = await normalizeSVG(
98-
content,
99-
file
100-
)
96+
const file = `${slug}.svg`
97+
const { el, content: svg } = await normalizeSVG(content, file)
10198

10299
fs.writeFileSync(path.join(SVG_DIR, file), svg, 'utf8')
103100

104-
let name = camelCase(slug)
105-
let Name = upperFirst(name)
101+
const name = camelCase(slug)
102+
const Name = upperFirst(name)
103+
104+
const { width, height, ...attributes } = el.attributes
106105

107-
let iconCode = stringifyObject(
106+
const iconCode = stringifyObject(
108107
{
109-
name: `icon-${slug}`,
108+
name: `Icon${Name}`,
110109
content: el.children.map((child) => stringify(child)).join(''),
111-
width: Number(width),
112-
height: Number(height),
110+
attributes: {
111+
...attributes,
112+
width: Number(width),
113+
height: Number(height)
114+
}
113115
},
114116
{
115-
indent: ' ',
117+
indent: ' '
116118
}
117119
)
118120

119-
let tplData = {
121+
const tplData = {
120122
name,
121123
Name,
122-
icon: iconCode,
124+
icon: iconCode
123125
}
124126

125-
let dataModuleCode = renderTpl(DATA_TPL, tplData)
126-
let iconModuleCode = renderTpl(ICON_TPL, tplData)
127+
const dataModuleCode = renderTpl(DATA_TPL, tplData)
128+
const iconModuleCode = renderTpl(ICON_TPL, tplData)
127129

128-
fs.writeFileSync(path.join(DATA_DIR, `icons/${Name}.js`), dataModuleCode, 'utf8')
130+
fs.writeFileSync(
131+
path.join(DATA_DIR, `icons/${Name}.js`),
132+
dataModuleCode,
133+
'utf8'
134+
)
129135

130136
ICON_PACKS.forEach((pack) => {
131-
let iconsDir = path.join(getPackDir(pack), 'src/icons')
132-
fs.writeFileSync(path.join(iconsDir, `${Name}.js`), iconModuleCode, 'utf8')
137+
const iconsDir = path.join(getPackDir(pack), 'src/icons')
138+
fs.writeFileSync(
139+
path.join(iconsDir, `${Name}.js`),
140+
iconModuleCode,
141+
'utf8'
142+
)
133143
})
134144

135145
return { slug, name, Name, file }
136146
})
137147
).then((icons) => {
138-
let dataIndex = icons
148+
const dataIndex = icons
139149
.map((data) => renderTpl(DATA_EXPORT_TPL, data))
140150
.join('')
141151

142152
fs.writeFileSync(path.join(DATA_DIR, 'index.js'), dataIndex, 'utf8')
143153

144-
let iconIndex =
154+
const iconIndex =
145155
icons.map((data) => renderTpl(ICON_EXPORT_TPL, data)).join('') +
146-
`export createIcon from './createIcon'\n`
156+
'export createIcon from \'./createIcon\'\n'
147157

148158
ICON_PACKS.concat(DATA_PACK).forEach((pack) => {
149-
let packDir = getPackDir(pack)
159+
const packDir = getPackDir(pack)
150160
if (pack !== DATA_PACK) {
151161
fs.writeFileSync(path.join(packDir, 'src/index.js'), iconIndex, 'utf8')
152162
}
153163

154-
let readmeFile = path.join(packDir, 'README.md')
155-
let readmeContent = fs.readFileSync(readmeFile, 'utf8')
164+
const readmeFile = path.join(packDir, 'README.md')
165+
const readmeContent = fs.readFileSync(readmeFile, 'utf8')
156166

157-
let cols = 5
158-
let prefix = pack === DATA_PACK ? 'data' : 'Icon'
159-
let iconTable =
167+
const cols = 5
168+
const prefix = pack === DATA_PACK ? 'data' : 'Icon'
169+
const iconTable =
160170
'<table><tbody>' +
161171
Array.from({ length: Math.ceil(icons.length / cols) })
162172
.map((_, i) => {
@@ -178,7 +188,7 @@ async function generate() {
178188
fs.writeFileSync(
179189
readmeFile,
180190
commentMark(readmeContent, {
181-
icons: iconTable,
191+
icons: iconTable
182192
}),
183193
'utf8'
184194
)
@@ -188,13 +198,13 @@ async function generate() {
188198
})
189199
}
190200

191-
function sortFileData(f1, f2) {
201+
function sortFileData (f1, f2) {
192202
return f1.slug > f2.slug ? 1 : -1
193203
}
194204

195-
async function getSVGFiles() {
205+
async function getSVGFiles () {
196206
if (ENDPOINT) {
197-
let { data } = JSON.parse(await fetch(ENDPOINT).then((res) => res.text()))
207+
const { data } = JSON.parse(await fetch(ENDPOINT).then((res) => res.text()))
198208

199209
clearDir(RAW_DIR)
200210

@@ -209,43 +219,43 @@ async function getSVGFiles() {
209219
return data
210220
.map(({ label, svg }) => ({
211221
slug: label.replace(/_/g, '-'),
212-
content: svg,
222+
content: svg
213223
}))
214224
.sort(sortFileData)
215225
} else {
216226
return fs
217227
.readdirSync(RAW_DIR)
218228
.filter((file) => ICON_PATTERN.test(file))
219229
.map((file) => {
220-
let slug = file.replace(ICON_PATTERN, (_, $1) => $1)
221-
let content = fs.readFileSync(path.resolve(RAW_DIR, file), 'utf8')
230+
const slug = file.replace(ICON_PATTERN, (_, $1) => $1)
231+
const content = fs.readFileSync(path.resolve(RAW_DIR, file), 'utf8')
222232
return {
223233
slug,
224-
content,
234+
content
225235
}
226236
})
227237
.sort(sortFileData)
228238
}
229239
}
230240

231-
async function normalizeSVG(content, file) {
241+
async function normalizeSVG (content, file) {
232242
const shasum = createHash('sha1')
233243
shasum.update(content)
234244
const id = shasum.digest('hex').substring(0, 5)
235245

236-
let { error, data } = await optimize(content, getSVGOConfig({ id }))
246+
const { error, data } = await optimize(content, getSVGOConfig({ id }))
237247
if (error) {
238248
console.error(file, error)
239249
return
240250
}
241251

242-
let el = await parse(data)
252+
const el = await parse(data)
243253
console.log(`Normalizing ${file}...`)
244-
let { attributes } = el
254+
const { attributes } = el
245255
let { width, height, viewBox } = attributes
246256

247257
if (!viewBox && !(width && height)) {
248-
console.error(file, `doesn't contain a valid size declaration.`)
258+
console.error(file, 'doesn\'t contain a valid size declaration.')
249259
console.error(width, height, viewBox)
250260
} else if (viewBox) {
251261
// has viewBox, override width/height
@@ -258,15 +268,15 @@ async function normalizeSVG(content, file) {
258268
}
259269

260270
walkElement(el, {
261-
enter(node) {
262-
let { attributes } = node
271+
enter (node) {
272+
const { attributes } = node
263273

264274
delete attributes.class
265275

266-
let ctxFill = (getContextAttr(node, 'fill') || '').toLowerCase()
267-
let ctxStroke = (getContextAttr(node, 'stroke') || '').toLowerCase()
268-
let attrFill = (attributes.fill || '').toLowerCase()
269-
let attrStroke = (attributes.stroke || '').toLowerCase()
276+
const ctxFill = (getContextAttr(node, 'fill') || '').toLowerCase()
277+
const ctxStroke = (getContextAttr(node, 'stroke') || '').toLowerCase()
278+
const attrFill = (attributes.fill || '').toLowerCase()
279+
const attrStroke = (attributes.stroke || '').toLowerCase()
270280

271281
if (attrFill) {
272282
if (!ctxFill) {
@@ -308,18 +318,18 @@ async function normalizeSVG(content, file) {
308318
}
309319
}
310320
}
311-
},
321+
}
312322
})
313323

314324
return {
315325
el,
316326
content: stringify(el),
317327
width,
318-
height,
328+
height
319329
}
320330
}
321331

322-
function walkElement(el, { enter, leave }) {
332+
function walkElement (el, { enter, leave }) {
323333
if (typeof enter === 'function') {
324334
enter(el)
325335
}
@@ -335,7 +345,7 @@ function walkElement(el, { enter, leave }) {
335345
}
336346
}
337347

338-
function getContextAttr(el, attr) {
348+
function getContextAttr (el, attr) {
339349
let node = el.parentNode
340350
while (node) {
341351
if (node.attributes && node.attributes[attr]) {

‎package.json

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,11 @@
2020
"devDependencies": {
2121
"bumpp": "^7.1.1",
2222
"comment-mark": "^1.0.0",
23+
"eslint": "^8.0.1",
24+
"eslint-config-standard": "^17.0.0",
25+
"eslint-plugin-import": "^2.25.2",
26+
"eslint-plugin-n": "^15.0.0",
27+
"eslint-plugin-promise": "^6.0.0",
2328
"esm": "^3.2.25",
2429
"lodash": "^4.17.19",
2530
"mkdirp": "^1.0.4",

‎packages/dls-icons-react/rollup.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@ const babelConfig = {
1212
[
1313
'@babel/preset-env',
1414
{
15-
modules: false,
16-
},
15+
modules: false
16+
}
1717
],
18-
'@babel/preset-react',
18+
'@babel/preset-react'
1919
],
2020
plugins: [
2121
'@babel/plugin-proposal-export-default-from',
22-
'babel-plugin-react-require',
22+
'babel-plugin-react-require'
2323
],
2424
exclude: 'node_modules/**',
2525
extensions: ['.js'],
26-
babelHelpers: 'bundled',
26+
babelHelpers: 'bundled'
2727
}
2828

2929
const main = async () => {
@@ -33,33 +33,33 @@ const main = async () => {
3333
entries: [
3434
{
3535
find: '@',
36-
replacement: path.resolve(__dirname, '../../src'),
37-
},
38-
],
36+
replacement: path.resolve(__dirname, '../../src')
37+
}
38+
]
3939
}),
4040
css({ plugins: [cssnano()] }),
4141
babel(babelConfig),
42-
autoExternal({ dependencies: false }),
42+
autoExternal({ dependencies: false })
4343
]
4444

4545
const inputOptions = {
4646
context: __dirname,
4747
input: 'src/index.js',
48-
plugins: plugins,
48+
plugins
4949
}
5050

5151
const bundle = await rollup(inputOptions)
5252
bundle.write({
5353
format: 'cjs',
5454
file: 'dist/cjs/index.js',
5555
sourcemap: true,
56-
banner: '/* eslint-disable */',
56+
banner: '/* eslint-disable */'
5757
})
5858
bundle.write({
5959
format: 'es',
6060
file: 'dist/es/index.js',
6161
sourcemap: true,
62-
banner: '/* eslint-disable */',
62+
banner: '/* eslint-disable */'
6363
})
6464
}
6565

0 commit comments

Comments
 (0)